Description:
This script allows you to hide text (or any element) behind another element, in this case an image of James Bond, and reveal the underlying element when you hover over the image. Essentially, we are absolutely positioning one element on top of the other and then moving the element on top (image of James Bond) when we hover over it to reveal the text (or any other element) that lay beneath.
View the source to see detailed line by line descriptions of the code, as well as the necessary styles to make this work properly.
Demo:
The Code:
HTML
<div id="container">
<div class="wrap">
<img src="back.jpg" alt="image" />
<img src="front.jpg" class="front" alt="image" />
</div>
<div class="wrap">
<img src="back.jpg" alt="image" />
<img src="front.jpg" class="front" alt="image" />
</div>
<div class="wrap">
<img src="back.jpg" alt="image" />
<img src="front.jpg" class="front" alt="image" />
</div>
</div>
CSS
<style type="text/css">
#container {width: 850px; text-align: center; margin: auto;}
.wrap {width: 250px; height: 140px; position: relative; overflow: hidden; /*hides anything that overflows the height of 140px. If we didn't do this, we would see the james bond image flow underneath the text rather than appearing to slide out of sight*/ float: left; padding: 0 1em;} /* be sure to position the div so that when we position the images absolutely, they will be positioned according to the top left of the containing div, not the window */
img {position: absolute; top: 0; left: 0;} /* position absolute forces these images to lay over the text that is beneath them */
</style>
jQuery
<script type="text/javascript">
$(function() {
$('.wrap').hover(function() { // run this function when we hover over the div with class wrap. We run this function on this div wrap and not the actual img with class front because if we were to hover our mouse over the top of the img, it would begin to move down, away from where our mouse is. Once it is outside of where our mouse is, the hover funciton will stop (cause we are no longer hovered over the image) and the un-hover function, which is to move the image back up to position 0, will run...until the image is back under our mouse, in which case the hover function will kick back in causing the image to move back down thus creating a weird, unreliable up and down sliding where we would have to move our mouse down with the image in order to continue to hover over the targeted hover element (the image) in order to continue to allow it to slide out of sight (down 300 pixels) as the hover function calls for. Therefore, we wrap the image in a div because even as the image animates, we will still be hovering over the wrap div allowing the function to continue to run and thus, for the image to slide completely out of site. Whew! That probably doesn't make sense. But you can just try it out and you will what I mean.
$(this).children('.front').stop().animate({ "top" : '300px'}, 700); // get all children in the wrap div with the class of front, stop any other animations that may be happening on this div, and run the animation we designate, which is to move down (from the top 300px). We do this over a period of 700 milliseconds.
}, function() { // second function to run when we un-hover
$(this).children('.front').stop().animate({ "top" : '0'}, 400); // shift .front back up to its original position of 0, when we are no long hovering over wrap. We do this over a period of 400 milliseconds.
});
});
</script>
