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

ΚΩΔΙΚΑΣ ΜΕΓΕΝΘΥΣΗΣ ΦΩΤΟΓΡΑΦΙΩΝ Νο 3
Με τον παρακάτω κώδικα μπορούμε περνώντας το ποντίκι μας πάνω από τις φωτογραφίες μας να τις μεγενθύνουμε. Το μέγεθος των μικρών εικόνων το ρυθμίζετε αλλάζοντας τα γαλάζια νούμερα εκεί που γράφει width: 232px; height:145px; Το πόσο θα μεγενθύνεται η φωτογραφία το ρυμθίζετε αλλάζοντας το γαλάζιο νούμερο εκεί που γράφει width:480px; Αν θέλετε πατώντας κλίκ πάνω στην φωτογραφία να ανοίγει σε άλλη θέση μέσα στο ιστολόγιο αλλάξτε τα left:0px; top:30px; Το μώβ link είναι της μικρής εικόνας με πλάτος 176px και το πράσινο link είναι της μεγάλης εικόνας με 480px πλάτος. Αυτά τα λίνκ τα αλλάζετε με τα δικά σας link εικόνων.

<style>

.pic{width:232px;height:145px;}

.picbig{position: fixed; left:0px; top:30px;width:0px;

-webkit-transition:width 0.3s linear 0s;

transition:width 0.3s linear 0s; z-index:10;}

.pic:hover + .picbig{width:480px;}

</style>

<img class="pic" src="http://i.imgur.com/fiVofHIm.jpg" width="232" height="145" title="ZAKYNTHOS NAYAGIO" alt="ZAKYNTHOS">

<img class="picbig" src="http://i.imgur.com/fiVofHI.jpg" title="ZAKYNTHOS NAYAGIO" alt="ZAKYNTHOS">

<img class="pic" src="http://i.imgur.com/gCr4ycDm.jpg" width="232" height="145" title="LEYKADA PORTO KATSIKI" alt="LEYKADA">

<img class="picbig" src="http://i.imgur.com/gCr4ycD.jpg" title="LEYKADA PORTO KATSIKI" alt="LEYKADA">

<img class="pic" src="http://i.imgur.com/Pq9Dexam.jpg" width="232" height="145" title="KERKYRA PALAIOKASTRITSA" alt="KERKYRA">

<img class="picbig" src="http://i.imgur.com/Pq9Dexa.jpg" title="KERKYRA PALAIOKASTRITSA" alt="KERKYRA">

<img class="pic" src="http://i.imgur.com/oSC4D7Rm.jpg" width="232" height="145" title="SKIATHOS KOYKOYNARIES" alt="SKIATHOS">

<img class="picbig" src="http://i.imgur.com/oSC4D7R.jpg" title="SKIATHOS KOYKOYNARIES" alt="SKIATHOS">