Making 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?

Let’s start

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)*/
	bottom: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);
	});

});

Final words

Very simple and nice effect isn’t it? If you have any problems with this feel free to share it and we will be more then happy to help you out.

Don’t Forget

If you want you can subscribe to TutsValley RSS Feed or follow us on Twitter to be informed when a new tutorial comes out. Thank you.