Home » Tutorials » JavaScript » JQuery: Thumbnail With Fading Caption

JQuery: Thumbnail With Fading Caption

JQuery: Thumbnail With Fading Caption

Tutorial Details

  • Difficulty: Intermediate
  • Technology: HTML4+, CSS2+, JQuery
  • Supported Browser: Firefox 4.0+, Chrome 5+, Safari 4+, Internet Explorer 7+

Today, the objective of this lesson is to create a thumbnail with fading caption by using the famous JavaScript Framework – JQuery. Not sure what is this about? Don’t worry, mouse over on the thumbnail below.

Demo

Home Page
Lorem ipsum dolor sit amet.

About Us
Lorem ipsum dolor sit amet.

Cool right? The fadeIn and fadeOut methods are the keys to achieve our objective. FadeIn() and FadeOut are the methods to animate the opacity of the selected elements. In order to fade in your hidden object, you need to implement fadeIn() method to display it on screen. In contrast, fadeOut() is use to hide the object until it opacity reach 0 and display style property is set to none. There are two parameters for fadeIn() and fadeOut(), which is:

.fadeOut( [ duration ], [ callback ] )
.fadeIn( [ duration ], [ callback ] )

The [duration] parameter is use to specify the duration of the animation, you set it in strings ‘slow’, ‘fast’ or in milliseconds, example: ‘400’.

The [callback] parameter is use to call / fire a function once the the animation is complete. For example, you might want to create a pop up window when the elements is fade in.

So, let’s start to create the thumbnail with fading caption.

1. HTML

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thumbnail With Fading Caption</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
</head>

<body>
<div class="item">
	<img src="thumb01.jpg" width="100" height="100" alt="" />
    <div class="caption">
    	<a href="#"><strong>Home Page</strong><br />
        Lorem ipsum dolor sit amet.</a>
    </div>
</div>

<div class="item">
	<img src="thumb02.jpg" width="100" height="100" alt="" />
    <div class="caption">
    	<a href="#"><strong>Home Page</strong><br />
        Lorem ipsum dolor sit amet.</a>
    </div>
</div>
</body>
</html>

As you can see above, we create the thumbnail image and we store the description in the div called ‘caption’.

2. CSS

.item {
	float: left;
	height: 100px;
	margin: 5px;
	width: 100px;

	/*In order for absolutely positioning child element(caption div), you need to set position relative for its parent*/
	position: relative;
}

.item .caption {
	background: #000;
	cursor: pointer;
	height: 100px;
	width: 100px;

	/*Make it overlay on its parent*/
	position: absolute;

	/*Align it at top of its parent*/
	top: 0;

}

.item .caption a {
	color: #0099cc;
	display: block;
	font-size: 14px;
	text-decoration: none;
	padding: 15px;
}

There are several things you need to take care when writing your css code. You must specify the position properties of div named ‘item’ to ‘relative’ and same to the position properties of div named ‘caption’ to ‘absolute’, else the caption wouldn’t overlay on its parent, which is the ‘item’ div.

3. JavaScript

$(document).ready(function() {

	$('.item .caption').hide();

	//On mouse over
	$('.item').hover(function() {

		//Display the caption
		$(this).find('div.caption').stop().fadeIn(200);
	},
	//When mouse leave
	function() {

		//Hide the caption
		$(this).find('div.caption').stop().fadeOut(200);
	});

});

Here, we implement JavaScript to the elements. In this case, we hide our caption when web page is loaded and we fade in, and fade out the caption with 200 milliseconds animation when user interact with the elements.

The final code as below:

Final Code

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thumbnail With Fading Caption</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

<script type="text/javascript">
$(document).ready(function() {

	$('.item .caption').hide();

	//On mouse over
	$('.item').hover(function() {

		//Display the caption
		$(this).find('div.caption').stop().fadeIn(200);
	},
	//When mouse leave
	function() {

		//Hide the caption
		$(this).find('div.caption').stop().fadeOut(200);
	});

});
</script>

<style>
.item {
	float: left;
	height: 100px;
	margin: 5px;
	width: 100px;

	/*In order for absolutely positioning child element(caption div), you need to set position relative for its parent*/
	position: relative;
}

.item .caption {
	background: #000;
	cursor: pointer;
	height: 100px;
	width: 100px;

	/*Make it overlay on its parent*/
	position: absolute;

	/*Align it at top of its parent*/
	top: 0;

}

.item .caption a {
	color: #0099cc;
	display: block;
	font-size: 14px;
	text-decoration: none;
	padding: 15px;
}
</style>
</head>

<body>
<div class="item">
	<img src="thumb01.jpg" width="100" height="100" alt="" />
    <div class="caption">
    	<a href="#"><strong>Home Page</strong><br />
        Lorem ipsum dolor sit amet.</a>
    </div>
</div>

<div class="item">
	<img src="thumb02.jpg" width="100" height="100" alt="" />
    <div class="caption">
    	<a href="#"><strong>Home Page</strong><br />
        Lorem ipsum dolor sit amet.</a>
    </div>
</div>
</body>
</html>

That’s it. Save your document and test it on your browser!

Other JavaScript Tutorials

  • bob

    very cool effect, and simple code as well.
    But it seems that if you hover quickly in and out, the script seems to stop working on some of the image. as if it’s not resetting and looping of some sort.

    I tested and got the same issue on my page and yours as well with FF 3.6.12 on Mac and Safari 5.0.3 on Mac.

    Do you have any idea why?

    • Pat

      I think the problem you are seeing bob is do with the animation not finishing when you hover in/out very quickly. Place “.stop(true, true)” instead of “.stop()” and see if that makes a difference.

      For more information see http://api.jquery.com/stop/

  • Geoff Johnson

    This is awesome I have been looking everywhere for this type of tutorial.

    I have a question, when I slow down the jquery fade effect to say 400 milliseconds the text will often freeze and become lighter until there is unreadable. Is there any fix for this? Also Is there a way to fade out the background. I am such a noob at Jquery stuff. Here is an example of what I have done.

    http://geoffjohnsondesign.com/test/

    • Hi Geoff Johnson,

      Thanks for reading the article of onlyWebPro.com.

      I found the solution for the problem that you mention. The solution is the stop function. Stop function consists of 2 parameters which is ‘clearQueue’ and ‘jumpToEnd’. And the format is look like this:

      .stop( [clearQueue,] [jumpToEnd] )

      In order to solve your problem, you have to add ‘true’ as the value for both of the parameters. This is because If more than one animation method is called on the same element, the later animations are placed in the effects queue for the element. These animations will not begin until the first one completes. When .stop() is called, the next animation in the queue begins immediately. If the clearQueue parameter is provided with a value of true, then the rest of the animations in the queue are removed and never run.

      The final JavaScript will be look like this:

      $(document).ready(function() {

      $(‘.item .caption’).hide();

      //On mouse over
      $(‘.item’).hover(function() {

      //Display the caption
      $(this).find(‘div.caption’).stop(true, true).fadeIn(400);
      },
      //When mouse leave
      function() {

      //Hide the caption
      $(this).find(‘div.caption’).stop(true, true).fadeOut(400);
      });

      });

      That’s all! Hope it helps in solving your problem 🙂

      Regards,
      The Management of onlyWebPro.com

      Join Us on our Facebook fan page
      http://www.facebook.com/pages/Connect-with-onlyWebPro/149917668368025

      Or follow us on Twiiter to get the latest updates of the tutorials
      http://twitter.com/onlyWebPro

Android, iOS Development Tutorials

Most Popular

Latest