IMAGE CAPTION HOVER EFFECT

IMAGE CAPTION HOVER EFFECT

Με τον παρακάτω κώδικα μπορείτε να βάλετε εικόνες οι οποίες όταν περνάτε το ποντίκι από πάνω τους θα μετακινούνται στα δεξιά και θα αποκαλύπτεται ένα κείμενο με την περιγραφή τους. Όταν βγάλετε το ποντίκι από πάνω τους τότε το κείμενο της περιγραφής θα καλύπτεται πάλι από την εικόνα. Οι διαστάσεις των συγκεκριμένων εικόνων είναι 314Χ196 και αν θέλετε να τις αλλάξετε πρέπει να το κάνετε σε όλα τα σημεία που θα τις συναντήσετε μέσα στον κώδικα.

Αν θέλετε να βάλετε περισσότερες εικόνες θα πρέπει να αντιγράψετε π.χ. το .photo-1 που είναι 3 γραμμές κώδικας και να το βάλετε μετά το .photo-3 μετονομάζοντάς το σε .photo-4 κ.ο.κ. Εννοείται πως θα προσθέσετε και μία ακόμα περιγραφή μετά την παράγραφο <ul class="photo-3 effect"> που θα την ονομάσετε <ul class="photo-4 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>