IMAGE CAPTION HOVER EFFECT
.
.
.
.
.
<style>
.photo-1 {position:relative;width:314px;height:196px;overflow:hidden;float:left;margin-right:0;padding:0;background:#115599;}
.photo-1 p, .photo-1 h2 {color:#FFF;margin:0;padding:5px;left:0px;top:0px;position:relative;}
.photo-1 p {font:15px arial;margin:0;} .photo-1 h2 {font:20px arial;margin:0;}
.photo-2 {position:relative;width:314px;height:196px;overflow:hidden;float:left;margin-right:0;padding:0;background:#255720;}
.photo-2 p, .photo-2 h2 {color:#FFF;margin:0;padding:5px;left:0px;top:0px;position:relative;}
.photo-2 p {font:15px arial;margin:0;} .photo-2 h2 {font:20px arial;margin:0;}
.photo-3 {position:relative;width:314px;height:196px;overflow:hidden;float:left;margin-right:0;padding:0;background:#740777;}
.photo-3 p, .photo-3 h2 {color:#FFF;margin:0;padding:5px;left:0px;top:0px;position:relative;}
.photo-3 p {font:15px arial;margin:0;} .photo-3 h2 {font:20px arial;margin:0;}
.effect img {position:absolute;margin:0px;padding:0;right:0;top:0;cursor:pointer;
-webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
-moz-transition:top .4s ease-in-out,right .4s ease-in-out;
-o-transition:top .4s ease-in-out,right .4s ease-in-out;
transition:top .4s ease-in-out,right .4s ease-in-out}
.effect img.top:hover {top:-196px;right:-314px;padding-bottom:196px;padding-left:314px}
</style>
<ul class="photo-1 effect">
<li><h2>ΝΑΥΑΓΙΟ ΖΑΚΥΝΘΟΣ</h2>
<p>Σίγουρα η διασημότερη παραλία της Ελλάδας και η πιο εντυπωσιακή της Μεσογείου. Η φωτογραφία της έχει κάνει το γύρο του κόσμου και περιλαμβάνεται σε όλους τους τουριστικούς οδηγούς που δείχνουν τη χώρα μας. Είναι το σήμα κατατεθέν της Ζακύνθου, σε όλο τον κόσμο και κατατάσσεται σε μια από τις πιο πολυφωτογραφημένες παραλίες.</p></li>
<li><img class="top" src="http://i.imgur.com/fiVofHIm.jpg" width="314" height="196"/></li></ul>
<ul class="photo-2 effect">
<li><h2>ΠΟΡΤΟ ΚΑΤΣΙΚΙ ΛΕΥΚΑΔΑ</h2>
<p>Αυτή είναι η καλύτερη παραλία της Λευκάδας. Απλώνεται στα νοτιοδυτικά της Λευκάδας, σε μια περιοχή εξαιρετικής φυσικής ομορφιάς, όπου κυριαρχούν ο ήλιος, το ελληνικό φως, τα απόκρημνα βράχια, η άμμος, το γαλάζιο και το βαθύ μπλε της θάλασσας. Το μοναδικό φυσικό ανάγλυφο, τα υπέροχα χρώματα και το σαγηνευτικό τοπίο είναι κάτι που δεν πρέπει να χάσετε.</p></li>
<li><img class="top" src="http://i.imgur.com/gCr4ycDm.jpg" width="314" height="196"/></li></ul>
<ul class="photo-3 effect">
<li><h2>ΜΥΡΤΟΣ ΚΕΦΑΛΟΝΙΑ</h2>
<p>Η παραλία Μύρτος αποτελεί το σήμα κατατεθέν για την Κεφαλονιά. Έχει βραβευτεί πολλές φορές διεθνώς και κάθε χρόνο βραβεύεται με την γαλάζια σημαία του ΕΟΤ. Το τοπίο από ψηλά είναι ανεπανάληπτο, καταπράσινα βράχια που καταλήγουν σε μια μεγάλη παραλία με άσπρα βότσαλα και γαλαζοπράσινα νερά. Το μπάνιο και το ηλιοβασίλευμα θα σας μείνει αξέχαστο.</p></li>
<li><img class="top" src="http://i.imgur.com/qrKer61m.jpg" width="314" height="196"/></li></ul>
