Overlay Text over an Image with a Very Simple jQuery Snippet

This post will show you how much jQuery is helpful to give a trendy face of the presentation of your images.
There are some developers who want only to put fixed text messages above the images. But there are others who like to add some spices to their images look.

This code which I will show you has been developed to be clear and simple as much as possible.

View Demo

The main idea behind consists to let user get the comment (or explanation) of the image he is hovering. This comment will appear when the user hover over the image, and will disappear when the mouse is out of the image.

So here I go. Our schematic will be like following:

Then the HTML code is:


<div id="container">
 <div class="wrap">
     <img class="back" src="leopard.jpg" alt="image"/>

     <span class="comment">
         Apple - Mac OS X Snow Leopard <br/> The world's most advanced OS
     </span>
 </div>
</div>

Note that the width/height of the wrap div is the same as those of the image.

The CSS is also simple to understand:


#container {
  width: 850px;
  text-align: center;
  margin: auto;
}

.back
{
  position:absolute;
  top:0;left:0;
}
.wrap
{
  width:550px;
  height:390px;
  position:relative;
  margin:auto;
  overflow:hidden;
}

.comment
{
  position:absolute;
  width:550px;
  top:400px;
  left:0px;
  letter-spacing: -1px;
  color: white; font: 24px/45px Berlin Sans FB, Sans-Serif;
  background: #4A4D4A;
  padding: 10px;
  filter:alpha(opacity=60);
  -moz-opacity:0.6;
  -khtml-opacity: 0.6;
  opacity: 0.6;
  line-height: 90%
}

The image class as well as the comment class should have absolute position in order to have the comment to be stuck on the image. Thus, the wrap class should be defined with relative position;
The overflow should be set to hidden for wrap class. This is done to hide the comment when it goes back;
There are the only important things to talk about. Otherwise, the rest of the parameters is clear to devour.

Finally, let’s talk about jQuery code. This code is a way to fulfill our task which is spicing our image look.


$(function(){

$('.wrap').hover(function(){
  $(this).children('.comment').stop().css("top", "0px");}
   
  , function(){
  $(this).children('.comment').stop().animate({"top": '400px'}, 600);});

});

We used hover jQuery event. The top value of the comment was 400px, which means that it was out of our eyesight. Now jQuery helps us to resotre it (set the top value to 0). Since the mouse is out of the image, the second function is fired with some animation thanks to jQuery effect.

For any kind of suggestion, please don’t hesitate.

Download Here

Tested successfully in Safari, FF, IE and Chrome (last versions)