• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

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

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


ZAKYNTHOS ZAKYNTHOS LEYKADA LEYKADA KERKYRA KERKYRA SKIATHOS SKIATHOS

<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.jpgwidth="232height="145title="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.jpgwidth="232height="145title="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.jpgwidth="232height="145title="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.jpgwidth="232height="145title="SKIATHOS KOYKOYNARIES" alt="SKIATHOS">
<img class="picbig" src="http://i.imgur.com/oSC4D7R.jpg" title="SKIATHOS KOYKOYNARIES" alt="SKIATHOS">

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.