Making SIMPLE AND EASY image captions using jQuery

In this tutorial we will make a nice semi-transparent image caption using jQuery. The image caption will be triggered on hover. We are going to use fadeTo() jQuery function to achieve the semi-transparency. It’s a really nice effect to have.

HOW DOES IT LOOK?

LETS START WITH HTML:

<!-- wrapper div -->  
<div class='wrapper'>  
    <!-- image -->  
    <img src='wolf.jpg' />  
    <!-- description div -->  
    <div class='description'>  
        <!-- description content -->  
        <div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. </div>  
        <!-- end description content -->  
    </div>  
    <!-- end description div -->  
</div>  
<!-- end wrapper div -->

CSS:

div.wrapper{  
    position:relative; /* important(so we can absolutely position the description div */  
}  
div.description{  
    position:absolute; /* absolute position (so we can position it where we want)*/  
    bottombottom:0px; /* position will be on bottom */  
    left:0px;  
    display:none; /* hide it */  
    /* styling bellow */  
    background-color:black;  
    font-family: 'tahoma';  
    font-size:15px;  
    color:white;  
}  
div.description_content{  
    padding:10px;  
}

JQUERY:

//We are using $(window).load here because we want to wait until the images are loaded  
$(window).load(function(){  
    //for each description div...  
    $('div.description').each(function(){  
        //...set the opacity to 0...  
        $(this).css('opacity', 0);  
        //..set width same as the image...  
        $(this).css('width', $(this).siblings('img').width());  
        //...get the parent (the wrapper) and set it's width same as the image width... '  
        $(this).parent().css('width', $(this).siblings('img').width());  
        //...set the display to block  
        $(this).css('display', 'block');  
    });  
  
    $('div.wrapper').hover(function(){  
        //when mouse hover over the wrapper div  
        //get it's children elements with class description '  
        //and show it using fadeTo  
        $(this).children('.description').stop().fadeTo(500, 0.7);  
    },function(){  
        //when mouse out of the wrapper div  
        //use fadeTo to hide the div  
        $(this).children('.description').stop().fadeTo(500, 0);  
    });  
  
});