Making A Cool Thumbnail Effect With Zoom And Sliding Captions

Since the thumbnail spotlight effect i wrote a tutorial about was and still is amazingly popular i decided to make another cool thumbnail effect. This time with zoom and sliding caption.

How it looks

HTML

<!-- start thumbnailWrapper div -->
<div class='thumbnailWrapper'>

	<ul>

		<li>
			<a href='#'><img src='images/1.jpg' /></a>
			<div class='caption'>
				<p class='captionInside'>CofeeNerd</p>
			</div>
		</li>

		<li>
			<a href='#'><img src='images/2.jpg' /></a>
			<div class='caption'>
				<p class='captionInside'>musiKings</p>
			</div>
		</li>

		<li>
			<a href='#'><img src='images/3.png' /></a>
			<div class='caption'>
				<p class='captionInside'>The Caribbean Energy</p>
			</div>
		</li>

		<div class='clear'></div><!-- clear the float -->

	</ul><!-- end unordered list -->

</div><!-- end spolightWrapper div -->

Nothing in the html worthy for special explanation. In the demo there are 9 list items but in the code above there are only 3, I removed 6 of them due to clarity of the HTML code.

CSS

.thumbnailWrapper ul {
	list-style-type: none; /* remove the default style for list items (the circles) */
	margin:0px; /* remove default margin */
	padding:0px; /* remove default padding */
}
.thumbnailWrapper ul li {
	float:left; /* important: left float */
	position:relative; /* so we can use top and left positioning */
	overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
}
.thumbnailWrapper ul li a img {
	width:200px; /* not important, the pics we use here are too big */
	position:relative; /* so we can use top and left positioning */
	border:none; /* remove the default blue border */
}
.caption{
	position:absolute; /* needed for positioning */
	bottom:0px; /* bottom of the list item (container) */
	left:0px; /* start from left of the list item (container) */
	width:100%; /* stretch to the whole width of container */
	display:none; /* hide by default */
	/* styling bellow */
	background:#0c4b62;
	color:white;
	opacity:0.9;
}
.caption .captionInside{
	/* just styling */
	padding:10px;
	margin:0px;
}
.clear { clear:both; } /* to clear the float after the last item */

jQuery

$(window).load(function(){

	//set and get some variables
	var thumbnail = {
		imgIncrease : 100, /* the image increase in pixels (for zoom) */
		effectDuration : 400, /* the duration of the effect (zoom and caption) */
		/*
		get the width and height of the images. Going to use those
		for 2 things:
			make the list items same size
			get the images back to normal after the zoom
		*/
		imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
		imgHeight : $('.thumbnailWrapper ul li').find('img').height() 

	};

	//make the list items same size as the images
	$('.thumbnailWrapper ul li').css({ 

		'width' : thumbnail.imgWidth,
		'height' : thumbnail.imgHeight 

	});

	//when mouse over the list item...
	$('.thumbnailWrapper ul li').hover(function(){

		$(this).find('img').stop().animate({

			/* increase the image width for the zoom effect*/
			width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
			/* we need to change the left and top position in order to
			have the zoom effect, so we are moving them to a negative
			position of the half of the imgIncrease */
			left: thumbnail.imgIncrease/2*(-1),
			top: thumbnail.imgIncrease/2*(-1)

		},{ 

			"duration": thumbnail.effectDuration,
			"queue": false

		});

		//show the caption using slideDown event
		$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);

	//when mouse leave...
	}, function(){

		//find the image and animate it...
		$(this).find('img').animate({

			/* get it back to original size (zoom out) */
			width: thumbnail.imgWidth,
			/* get left and top positions back to normal */
			left: 0,
			top: 0

		}, thumbnail.effectDuration);

		//hide the caption using slideUp event
		$(this).find('.caption').slideUp(thumbnail.effectDuration);

	});

});

One thing might confuse you in the jQuery, the caption slides up using the slideDown() function and it slides down using the slideUp() function. It’s not a mistake in the code, that’s how it should be.

Go to the jQuery page for slideDown function and check out the demo. You will notice that slideDown makes the hidden elements show, and slideUp makes them hide. Because we have positioned the caption on bottom, when we slideDown it stays at that same bottom position (bottom:0px) and because of that it’s being pushed up. I hope you understand :)

That’s it

I hope you like the effect we made in this tutorial and let me know in the comments if you would like to see more tutorials on effects like this one. I hope you enjoyed and learned something new.

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.