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

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.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

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.

Related posts:

  1. Making a Cool Spotlight Effect with jQuery
  2. Making image captions using jQuery
  3. Making Image Overlay Caption Using CSS
  4. Sliding door effect with JQuery
  5. Making an infinite JQuery carousel

Slobodan Kustrimovic

This author has yet to fill his BIO.

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

Comments

  • Glad you like it :)

  • Thanks for this tutorial. It’s a great effect. I adopt it for my website :)

    I think, we are many to wait another tutorial.

  • @Snorku – You’re welcome :) If you have some idea for a tutorial feel free to let me know using the contact form and i’ll see what i can do.

  • This is a nice effect.

    There’s a small typo in the .caption class (“bottom” written twice) –> “bottombottom:0px”

  • @Kristof – I’m glad you like it :) It’s not a typo, the syntax highlighter has few bugs and that’s one of them, but if you check the source it’s “bottom:0px;”

  • Love this tutorial. Been looking for a nice way to display some of my graphic work so will use this for an attractive effect. Keep it up .

  • Great effect, thanks.

  • @Rudra, @inalgnu – I’m happy you like it :)

  • As i frequently expected to write through my article a little something comparable to yours in some way you’ve had some sort of honest ideas in this article. I made query towards the main subject and as well , found out many guys may very well agree with your trusty weblog.Awesome job!The actual source site that customers should be able to find cam corder on our websites

    Admin comment: Too cute to go to SPAM.

  • like it)

  • Great effect, I think it’ll come in handy in some of my WP themes. Thanks :)

  • nice!

  • @ipad, @UniSphere – Cool, glad you do :)

  • Nice effect, though IE6 doesnt play nice with scaling images :) chunky edges.
    nice work though, greetz.

  • @Dries – The people who use IE6 don’t even deserve to see it properly anyway :)

  • uh, thats a nice effect. thanks for sharing!

  • @hubeRsen – I’m glad you like it :)

  • Awesome effect, would be great for a CSS or WP theme gallery style blog. Thanks for sharing :)

  • Hi – this is an awesome tutorial and also nicely explained as well :) I love this and also your spotlight tutorial and I’m trying to combine the two. I’ve found this website: http://www.spdaustin.com/
    which I think is using some of the technologies you’ve gone over but they have expanded the thumbnail on mouse over which I think is really clever and just wondered if you know how this would be done?

  • @mollypepperpot – That’s an awesome effect you found there. Pretty complex :) Will see what i can do

  • Excellent effect!!! Is there a way to combine your effect with the jquery lightbox effect? This would be great. Thanks again

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting