ΚΩΔΙΚΑΣ ΜΕΓΕΝΘΥΣΗΣ ΦΩΤΟΓΡΑΦΙΩΝ Νο 2
Με τον παρακάτω κώδικα μπορούμε περνώντας το ποντίκι μας πάνω από τις φωτογραφίες μας να τις μεγενθύνουμε. Το μέγεθος των μικρών εικόνων το ρυθμίζετε αλλάζοντας τα γαλάζια νούμερα εκεί που γράφει width="232" height="145" Το πόσο θα μεγενθύνεται η φωτογραφία το ρυμθίζετε αλλάζοντας τα πράσινα νούμερα εκεί που γράφει -transform:scale(2.0); Τα links των εικόνων που έχω χρωματίσει με μώβ χρώμα πρέπει να τα αλλάξετε με τα δικά σας links εικόνων.
Με τον παρακάτω κώδικα μπορούμε περνώντας το ποντίκι μας πάνω από τις φωτογραφίες μας να τις μεγενθύνουμε. Το μέγεθος των μικρών εικόνων το ρυθμίζετε αλλάζοντας τα γαλάζια νούμερα εκεί που γράφει width="232" height="145" Το πόσο θα μεγενθύνεται η φωτογραφία το ρυμθίζετε αλλάζοντας τα πράσινα νούμερα εκεί που γράφει -transform:scale(2.0); Τα links των εικόνων που έχω χρωματίσει με μώβ χρώμα πρέπει να τα αλλάξετε με τα δικά σας links εικόνων.
<style>
.enlarge img{margin:0px;width:232px;height:145px;
-moz-transition:-moz-transform 0.5s
ease-in;
-webkit-transition:-webkit-transform 0.5s
ease-in;
-o-transition:-o-transform 0.5s
ease-in;}
.enlarge img:hover{
-moz-transform:scale(2.0);
-webkit-transform:scale(2.0);
-o-transform:scale(2.0);}
</style>
<div class="enlarge"
>
<img src="http://i.imgur.com/xHwALvDm.jpg" width="232" height="145" title="RODOS"
/>
<img src="http://i.imgur.com/7X4wjWSm.jpg" width="232" height="145" title="KERKYRA"
/>
<img src="http://i.imgur.com/gCr4ycDm.jpg" width="232" height="145" title="LEYKADA"
/>
<img src="http://i.imgur.com/oSC4D7Rm.jpg" width="232" height="145" title="SKIATHOS" />
</div>
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου
► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".
Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.