Φίλες και φίλοι γεια σας, σήμερα θα δούμε πως μπορούμε να προσθέσουμε στις
φωτογραφίες που κάνουμε upload στα blog μας, με μία εντολή κώδικα Css, ένα
πολύ ωραίο εφέ το Bump Effect!Τί κάνει αυτό: Όταν περνάμε τον κέρσορα( mouseover)
πάνω από μία εικόνα αυτή ανασηκώνεται προς τα πάνω!Αν είναι πολλές στην σειρά,
πάει σαν ασανσέρ κάπως!

border: 5px solid #ccc;

float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
border-radius: 5px 5px 5px 5px;
}

.gobump img:hover {
margin-top: 2px;
}

...........................................................................................................................................

Όποιος θέλει αλλάζει το ccc  με άλλο χρώμα για να αλλάξει το κάδρο των φωτογραφιών!








Τώρα όποτε θέλετε να χρησιμοποιήσετε το Bump Effect...

Πηγαίνετε Blogger-->Διάταξη

Προσθήκη gadget-->Html javascript

και επικολλήστε τον ακόλουθο τον κώδικα..
.................................................................................................................................................
<a class="gobump" href="ΕΔΩ ΒΑΖΕΤΕ ΤΟ URL ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΣΑΣ"><img src="ΕΔΩ ΒΑΖΕΤΕ ΤΟ URL ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΣΑΣ"/></a>

Προσέξτε, την διεύθυνση της ίδιας φωτογραφίας την βάζετε 2 φορές εκεί που λέει ΕΔΩ 
ΒΑΖΕΤΕ ΤΟ URL ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΣΑΣ!


Εάν θέλετε να βάλετε φωτογραφίες μέσα σε ανάρτηση τότε πηγαίνετε στο HTML section
της ανάρτησης και χρησιμοποιήστε αυτόν τον κώδικα..
.....................................................................................................................................................

<div class="separator" style="clear: both; text-align: center;">
<a class="gobump" href="ΕΔΩ ΒΑΖΕΤΕ ΤΟ URL ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΣΑΣ" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="ΕΔΩ ΒΑΖΕΤΕ ΤΟ URL ΤΗΣ ΦΩΤΟΓΡΑΦΙΑΣ ΣΑΣ" width="320" /></a></div>

Καλή επιτυχία!!!!


Πηγή κώδικα
thanks to spiceupyourblog.com/



Edit by