Tech Time: Zoom Hover Effect to Image

TRANSLATUM

Μία πολύ χρήσιμη online εφαρμογή είναι
το Translatum το οποίο μας βοηθά να μεταφράσουμε λέξεις και κείμενα μέσα από πάρα πολλά λεξικά!Δεν θέλει εγκατάσταση απλά πατήστε στην εικόνα για να μεταφερθείτε στην ιστοσελίδα του Translatum, επιλέξτε

ότι σας ενδιαφέρει και πατήστε Μετάφραση!

Πέμπτη 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