Image Gallery με κώδικα μεγέθυνσης CSS3
Νέοι bloggers γεια σας...Κατά καιρούς έχω παρουσιάσει διάφορους κώδικες παρουσίασης image gallery με διάφορες τεχνικές ! Από τα καλλίτερα ήταν το image zoom inner
(από τα καλλίτερα ever), που εντυπωσίασαν ιδιαίτερα τους φίλους της
φωτογραφίας.Σήμερα σας έχω έναν κώδικα CSS3 (δεν αργεί το άνοιγμα της
σελίδας σας), που μεγεθύνει τις φωτογραφίες σας, όσο το ρυθμίσετε
εσείς....Κώδικας CSS3:
<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>
Κώδικας HTML:
<div class="hovergallery">
<img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ " />
<img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ " />
<img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ " />
<img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ " />
<img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ " />
<img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ " />
</div>
*** υπάρχει το στοιχείο opacity (διαφάνεια) ! αλλάξτε τη τιμή ...
*** αλλάξτε τις τιμές (0.8) που είναι το μέγεθος της μικρής εικόνας (thumbnail)
*** αλλάξτε τις τιμές (1.1) που είναι το μέγεθος της μεγέθυνσης...
*** έχει ρυθμίσεις για περιηγητές Safari, Mozilla + Chrome, Opera
*** τη σκιά και το χρόνο (σε sec) με τα πειράξετε, δεν είναι σημαντικά
*** μπορείτε να ενώσετε και τους 2 κώδικες και να τους κάνετε ένα κώδικα, και να το βάλετε σαν gadget ...=>
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
Πηγή : dynamicdrive.com/
