enavu webdevmania tutsvalley psdestination
visit the enavu network
21 Comments Article Title Overlay Article Title

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.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

How does it look?

pic

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.

Related posts:

  1. Making Image Overlay Caption Using CSS
  2. Making A Cool Thumbnail Effect With Zoom And Sliding Captions
  3. How to make a completely reusable jquery modal window
  4. Curtains Opening Animation with jQuery
  5. Image splitting effect with CSS and JQuery

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!

Comments

  • There was a little problem in IE.

    The position of the description was not where it should be, that’s fixed now (added left:0px; to the CSS for div.description)

  • Hi,
    great effect! Actually what Im looking for is the same thing but with the caption always visible (no interaction with mouse) and mainly I can’t center my image on the page when I use this effect. Is it possible to center the “captionned” images and make the caption always visible?

    Thanks

  • @Fab – Thanks.
    Remove the display:none; from div.description in the CSS and remove the jQuery part :) About the center, you can wrap it up in a div with CSS text-align:center (on the div).

    Hope that helps :)

  • How about compatibility? IE6? IE5.5? FireFox2.x ? 1.x? Opera?
    I can confirm it works fine in IE7, IE8, and FF3.5.
    Anyway, great snippet. Looks awesome. Thanks.

  • IE6 works, haven’t tested in IE5.5.
    Firefox works.
    Chrome works.
    Not tested in Opera but should work.

    Glad you like it :)

  • Hi.
    Why description and description_content are not placed inside a P & a Span?
    why all the HTML is divs? what about semantics?

  • Very nice and effective tutorial

  • Nice Script !

    Is there a way for the text to be always visible ? It’s like the text is transparent too.

  • @Jean-Frederic – Yeah that’s possible. FadeIn the .description to “1″ (it’s 0.7 now) but make another element inside the .description div (but before the . description_content) which will be same height and width as .description and make it black background with constant opacity of 0.7.

  • Very nicely done! This is very easy to implement.

  • It’s a great script, however I can’t seem to make it work in chromium 5.0.342.9 in Linux, neither your demo or another implementation. I wonder what is the problem…

  • This is great!! but I want to make it a set width and height – how do I change the javascript to have an exact width?

  • Is it possible to change the vertical alignment of the text? I’ve changed width and height of div.description_content to 100px each as I want to overlay an image of that size, and would like to put the text in the middle. I’ve tried ‘vertical-align: middle’ but that doesn’t seem to work…

  • You’ve got to add text-align:center; to div.description.

    Awesome script! Thank you very much for your work, i appreciate it =)

  • GREAT!!THISIS SO HELPFUL AWESOME SCRIPT!

  • thanks for your post and then I hope you continue commenting on the web

  • Thanks for this post mate. It really saved lot of work for me.

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting