Ads 468x60px

Πέμπτη, 9 Ιουνίου 2016

Zoom Hover Effect to Image

Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα πολύ απλό και λειτουργικό 
Zoom Hover Effect για τις εικόνες των blog μας!Μετά την εφαρμογή του με το
που κάνουμε mouseover στην εικόνα μας γίνεται μεγαλύτερη!Η λειτουργικότητα
του έχει να κάνει ότι μπορούμε να το κάνουμε μεμονωμένα στις εικόνες που
θέλουμε, και όχι σε όλες τις εικόνες που έχουμε αναρτήσει στην σελίδα μας!




Δείτε εδώ το DEMO


Για να το εγκαταστήσετε και εσείς:

 Πρώτα από όλα κάνετε BACK UP TO TEMPLATE ΣΑΣ και μετά:

αντιγράψτε τον ακόλουθο κώδικα
................................................................................................................................................................. 

.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

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

και...

Πηγαίνετε blogger-->Πρότυπο


 Επεξεργασία HTML

κάνετε click μέσα στο template

και πατώντας Ctrl  + F  ψάχνεται

να βρείτε το: ]]></b:skin>


Μόλις το βρείτε κάντε επικόλληση τον κώδικα

ακριβώς από  ΠΑΝΩ ΤΟΥ.


Πατήστε Αποθήκευση Προτύπου!  


Τώρα όταν θέλετε να εφαρμόσετε το zoom σε κάποια εικόνα θα την κάνετε
μέσω του παρακάτω κώδικα:

<a class="hovergallery" href="ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΟΥ BLOG ΣΑΣ" target="_blank">
<img src="ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ" /></a> 

Βάζετε την διεύθυνση του blog και της εικόνας σας στα αντίστοιχα σημεία του κώδικα
και.....

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

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλάται τον  κώδικα
!

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

Πηγή κώδικα 
thanks to full-tricks.blogspot.gr


 Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog