ΚΩΔΙΚΑΣ ΜΕΓΕΝΘΥΣΗΣ ΦΩΤΟΓΡΑΦΙΩΝ Νο 1

ΚΩΔΙΚΑΣ ΜΕΓΕΝΘΥΣΗΣ ΦΩΤΟΓΡΑΦΙΩΝ Νο 1
Με τον παρακάτω κώδικα μπορούμε περνώντας το ποντίκι μας πάνω από τις φωτογραφίες μας να τις μεγενθύνουμε. Το μέγεθος των μικρών εικόνων το ρυθμίζετε αλλάζοντας τα γαλάζια νούμερα εκεί που γράφει width: 168px; height:105px; Το πόσο θα μεγενθύνεται η φωτογραφία το ρυμθίζετε αλλάζοντας τα πράσινα νούμερα εκεί που γράφει -transform:scale(2.0); Πατώντας κλίκ πάνω στην φωτογραφία ανοίγει σε νέα καρτέλα η ίδια φωτογραφία στο μεγάλο της μέγεθος.

• 
• 
• 
• 
• 

<style>

.enlarge{list-style-type:none;margin:0;padding:0;}

.enlarge li{display:inline;}

.enlarge li img{

width: 168px;

height:105px;

border:0;     

margin-right: 0px;

-webkit-transition:-webkit-transform 0.1s ease-in;

-o-transition:-o-transform 0.1s ease-in; }

.enlarge li img:hover{

-moz-transform:scale(2.0);

-webkit-transform:scale(2.0);

-o-transform:scale(2.0);}

</style>

<ul class="enlarge">

<li><a href="http://i.imgur.com/UMQ2IrD.jpg" target="_blank">
<img src="http://i.imgur.com/UMQ2IrDm.jpg" title="ALONISOS" /></a></li>

<li><a href="http://i.imgur.com/7X4wjWS.jpg" target="_blank">
<img src="http://i.imgur.com/7X4wjWSm.jpg" title="KERKYRA" /></a></li>

<li><a href="http://i.imgur.com/DgCJJQe.jpg" target="_blank">
<img src="http://i.imgur.com/DgCJJQem.jpg" title="SKOPELOS" /></a></li>

<li><a href="http://i.imgur.com/rcivwQJ.jpg" target="_blank">
<img src="http://i.imgur.com/rcivwQJm.jpg" title="LEYKADA" /></a></li>

<li><a href="http://i.imgur.com/uFoNudk.jpg" target="_blank">
<img src="http://i.imgur.com/uFoNudk.jpg" title="SIVOTA" /></a></li></ul>