PHOTO GALLERY ΜΕ ΠΕΡΙΓΡΑΦΗ ΚΑΙ ΔΙΚΟ ΣΑΣ STYLE

PHOTO GALLERY ΜΕ ΠΕΡΙΓΡΑΦΗ ΚΑΙ ΔΙΚΟ ΣΑΣ STYLE

Αυτή είναι μία photo gallery με περιγραφή και δικό της style. Μπορείτε να αλλάξετε το χρώμα του background και του χρώματος κειμένου της περιγραφής αλλάζοντας τους 6ψήφιους κωδικούς χρωμάτων  εκεί που γράφει background και color. Το ίδιο πρέπει να κάνετε και για το περίγραμμα των εικόνων αλλάξτε το border: 1px solid #FBBB22; Οι διαστάσεις των εικόνων ρυθμίζονται εκεί που γράφει width:160px;height:100px; εντός του κώδικα style αλλά και αμέσως μετά τα πράσινα links των εικόνων. 

Τα γαλάζια links των εικόνων είναι τα links που θα οδηγήται ο αναγνώστης αν πατήσει επάνω στις εικόνες της photo gallery. Δείτε πως θα εμφανίζεται η photo gallery ακριβώς κάτω από εδώ. ▼

KERKYRA

PAXOI

LEYKADA

ITHAKI

KEFALLONIA

ZAKYNTHOS

KYTHYRA

MILOS

KRITI

RODOS

KARPATHOS

SANTORINI

MYKONOS

SYROS

POROS

<style>

div.img {margin:1px;padding:5px;background:#115599;border: 1px solid #FBBB22;float: left;width:160px;}

div.img:hover {background:#105105;border: 1px solid #00FF00;}

div.img img {width:160px;height:100px;}

div.desc {background:#115599;color:#FFF;font:13px arial;padding:5px;text-align: center;}

div.desc:hover {background:#105105;color:#FFF;font:13px arial;padding:5px;text-align:center;}

</style>

<div class="img">

<a target="_blank" href="http://i.imgbox.com/x4YtqHsG">

<img src="http://i.imgur.com/Pq9Dexat.jpg" alt="KERKYRA" width="160" height="100"></a>

<div class="desc">KERKYRA</div></div>

<div class="img">

<a target="_blank" href="http://i.imgur.com/kbCkBYe.jpg">

<img src="http://i.imgur.com/kbCkBYet.jpg" alt="PAXOI" width="160" height="100"></a>

<div class="desc">PAXOI</div></div>

<div class="img">

<a target="_blank" href="http://i.imgbox.com/MIiFeUzy">

<img src="http://i.imgur.com/gCr4ycDt.jpg" alt="LEYKADA" width="160" height="100"></a>

<div class="desc">LEYKADA</div></div>

<div class="img">

<a target="_blank" href="http://i.imgbox.com/ZpvJrjg4">

<img src="http://i.imgur.com/JcRaeRSt.jpg" alt="ITHAKI" width="160" height="100"></a>

<div class="desc">ITHAKI</div></div>

<div class="img">

<a target="_blank" href="http://i.imgbox.com/4jvkDVTA">

<img src="http://i.imgur.com/XMS6PHst.jpg" alt="KEFALLONIA" width="160" height="100"></a>

<div class="desc">KEFALLONIA</div></div>

<div class="img">

<a target="_blank" href="http://i.imgbox.com/R6GYEpSU">

<img src="http://i.imgur.com/I9SFA0st.jpg" alt="ZAKYNTHOS" width="160" height="100"></a>

<div class="desc">ZAKYNTHOS</div></div>

<div class="img">

<a target="_blank" href="http://i.imgur.com/bVvl5yw.jpg">

<img src="http://i.imgur.com/bVvl5ywt.jpg" alt="KYTHYRA" width="160" height="100"></a>

<div class="desc">KYTHYRA</div></div>

<div class="img">

<a target="_blank" href="http://i.imgbox.com/6CibblTz">

<img src="http://i.imgur.com/w9qsfyQt.jpg" alt="MILOS" width="160" height="100"></a>

<div class="desc">MILOS</div></div>

<div class="img">

<a target="_blank" href="http://i.imgbox.com/kV04fIoO">

<img src="http://i.imgur.com/gptb8xnt.jpg" alt="KRITI" width="160" height="100"></a>

<div class="desc">KRITI</div></div>

<div class="img">

<a target="_blank" href="http://i.imgbox.com/rMcsofyY">

<img src="http://i.imgur.com/xHwALvDt.jpg" alt="RODOS" width="160" height="100"></a>

<div class="desc">RODOS</div></div>

<div class="img">

<a target="_blank" href="http://i.imgbox.com/R6GYEpSU">

<img src="http://i.imgur.com/qMMDdhYt.jpg" alt="KARPATHOS" width="160" height="100"></a>

<div class="desc">KARPATHOS</div></div>

<div class="img">

<a target="_blank" href="http://i.imgbox.com/oAmPVZ8O">

<img src="http://i.imgur.com/KwuI9Z2t.jpg" alt="SANTORINI" width="160" height="100"></a>

<div class="desc">SANTORINI</div></div>

<div class="img">

<a target="_blank" href="http://i.imgbox.com/JwHSht5d">

<img src="http://i.imgur.com/C83SL17t.jpg" alt="MYKONOS" width="160" height="100"></a>

<div class="desc">MYKONOS</div></div>

<div class="img">

<a target="_blank" href="http://i.imgbox.com/LUt5RX51">

<img src="http://i.imgur.com/3sNGgkut.jpg" alt="SYROS" width="160" height="100"></a>

<div class="desc">SYROS</div></div>

<div class="img">

<a target="_blank" href="http://i.imgbox.com/V6XAirZ2">

<img src="http://i.imgur.com/n5IesXRt.jpg" alt="POROS" width="160" height="100"></a>

<div class="desc">POROS</div></div>