Ads 468x60px

Δευτέρα, 4 Απριλίου 2016

Css Bump Effect To Ιmages

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




Για να το εγκαταστήσετε και εσείς ακολουθήστε τα εξής βήματα..

1ον:Θα πρέπει πρώτα να εγκαταστήσουμε τον κώδικα  CSS και για να γίνει
αυτό αντιγράψτε τον ακόλουθο κώδικα και ακολουθήστε τον εικονογραφημένο
οδηγό για να τον επικολλήσετε...

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

.gobump img{
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  με άλλο χρώμα για να αλλάξει το κάδρο των φωτογραφιών!


Εγκατάσταση Css 








Τώρα όποτε θέλετε να χρησιμοποιήσετε το 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

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog