Δευτέρα 26 Σεπτεμβρίου 2016
Zoom Hover Effect to Image update
Φίλες και φίλοι γεια σας, σε πιο παλιά ανάρτηση είχαμε δει έναν τρόπο να
μεγεθύνουμε τις εικόνες του blog μας αυτόματα όταν περνάμε τον κέρσορα
πάνω από αυτές(mouseover)!Σήμερα θα δούμε ακριβώς το ίδιο με την μόνη
διαφορά ότι με τον σημερινό τρόπο δεν χρειάζεται να επέμβουμε στο template
μας, απλά ο κώδικας μπαίνει σαν απλό gadget!
Η εγκατάσταση είναι απλή:
Πηγαίνετε blogger--> Διάταξη -->
Προσθήκη gadget-->HTML/JavaScript
και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα-->
..............................................................................................................................................................
................................................................................................................................................................
ΑΛΛΑΓΕΣ
Απλά όταν θέλετε να χρησιμοποιήσετε το ''hover zoom'' σε κάποια εικόνα θα βάζετε τον
κώδικα και την δική σας διεύθυνση της εικόνας στο αντίστοιχο σημείο του κώδικα!
Αποθήκευση και έτοιμοι!
Καλή επιτυχία!!!
Πηγή κώδικα
thanks to dynamicdrive.com
Edit by
μεγεθύνουμε τις εικόνες του blog μας αυτόματα όταν περνάμε τον κέρσορα
πάνω από αυτές(mouseover)!Σήμερα θα δούμε ακριβώς το ίδιο με την μόνη
διαφορά ότι με τον σημερινό τρόπο δεν χρειάζεται να επέμβουμε στο template
μας, απλά ο κώδικας μπαίνει σαν απλό gadget!
Η εγκατάσταση είναι απλή:
Πηγαίνετε blogger--> Διάταξη -->
Προσθήκη gadget-->HTML/JavaScript
και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα-->
..............................................................................................................................................................
<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>
<div class="hovergallery">
<img src="ΕΔΩ ΜΠΑΙΝΕΙ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ ΣΑΣ" />
</div>
................................................................................................................................................................
ΑΛΛΑΓΕΣ
Απλά όταν θέλετε να χρησιμοποιήσετε το ''hover zoom'' σε κάποια εικόνα θα βάζετε τον
κώδικα και την δική σας διεύθυνση της εικόνας στο αντίστοιχο σημείο του κώδικα!
Αποθήκευση και έτοιμοι!
Καλή επιτυχία!!!
Πηγή κώδικα
thanks to dynamicdrive.com
Edit by
Εγγραφή σε:
Σχόλια ανάρτησης
(
Atom
)
Smart Defrag 2
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Smart Defrag 2 ένα από τα καλύτερα προγράμματα ανασυγκρότησης των σκληρών μας δίσκων...
Auto Scrolling Recent Posts
Γειά σας ένα πολύ ωραίο widget με οριζόντιο Auto Scrolling για να παρουσιάζουμε τις πρόσφατες αναρτήσεις μας...
Free YouTube Uploader
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Free YouTube Uploader το οποίο μας επιτρέπει...
Social media
Γειά σας τα gadgets και widgets για τα social media δεν έχουν πλέον τελιωμό και σε αυτήν την ανάρτηση θα δούμε...
Back to top button
Γεία σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ γνωστό και χρήσιμο gadget το οποίο μας βοηθά έτσι ώστε...
Sitemap Widget
Γειά σας,σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο και χρήσιμο Sitemap widget το οποίο μας δείχνει μαζεμένες σε μία σελίδα...
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .
0 σχόλια :
Δημοσίευση σχολίου