Introduction

Long long time ago, my friend had written a jQuery tutorial about spotlight effect called - making a cool spotlight efect with jQuery, he got this inspiration from Sikker website that uses the similar effect for all his portfolios. I think that's cool, so I decided to spice thing up a little bit by adding a caption into it.

Just in case you're new here, Queness has been publishing practical jQuery tutorials that able to help you to build a more interactive website. Feel free to browse through my previous post, I'm pretty sure you will find something interesting. (if not, contact me and tell me what are you looking for) :)

This tutorial will guide you how to build a spotlight effect with caption. I have tried to keep it as simple as possible and I hope you will like it. This is how it will look like:

Let's start it with HTML

1. HTML

We will use divs instead of ul list here. I have tested it with UL before, and it will work perfectly fine, you just have to style is with CSS. The caption for the thumbnail will be obtained by jQuery from the anchor Title.

<div id="items">
	<a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.">
		<img src="dummy.gif" width="190" height="120"/>
	</a>
	<a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.">
		<img src="dummy.gif" width="190" height="120"/>
	</a>
	<a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.">
		<img src="dummy.gif" width="190" height="120"/>
	</a>
	<a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.">
		<img src="dummy.gif" width="190" height="120"/>
	</a>
</div>	
<div class="clear"></div>

2. CSS

CSS is pretty simple, if you're using different image size, you might need to adjust the position of caption. Also, we are using a little bit of CSS3 here, we're using drop shadow, so when you mouse over the item, you will able to see them in firefox, chrome and safari, maybe opera but definitely not internet explorer.

body {
	font-family:arial;
	margin-top:70px;
}
		
img {border:none;}
	
#items a {
	text-decoration:none;
	color:#3deeee;	
}
		
#items {
	width:786px;
	margin:0 auto;
}

#items .item {
	display:block;
	width:190px;
	height:120px;
	border:2px solid #666;	
	float:left;
	position:relative;
}
		
#items .item .caption {	
	position:absolute;
	top:80px;
	left:2px;
	padding:3px;
	font-size:10px;
	width:180px;
	display:none;
	background:#000;
}
				
.clear {
	clear:both;	
}
	
.effect {
	/* CSS3 shadow */
	box-shadow: 0 0 10px #444;	
	-moz-box-shadow: 0 0 10px #444;	
	-webkit-box-shadow: 0 0 10px #444;	
}

3. Javascript

ALright, here we come to the script that makes everything alive. The way it works is really simple, when we mouse over the item inside the #items, it will set the opacity of the siblings of the item to 0.1, add drop shadow effect and then display the caption. If the user left the #items block, everything is reset back to default

	$(document).ready(function () {

		//loop through all the children in #items
		//save title value to a span and then remove the value of the title to avoid tooltips
		$('#items .item').each(function () {
			title = $(this).attr('title');
			$(this).append('' + title + '');	
			$(this).attr('title','');
		});

		$('#items .item').hover(
			function () {
				//set the opacity of all siblings
				$(this).siblings().css({'opacity': '0.1'});	
				
				//set the opacity of current item to full, and add the effect class
				$(this).css({'opacity': '1.0'}).addClass('effect');
				
				//show the caption
				$(this).children('.caption').show();	
			},
			function () {
				//hide the caption
				$(this).children('.caption').hide();		
			}
		);
		
		$('#items').mouseleave(function () {
			//reset all the opacity to full and remove effect class
			$(this).children().fadeTo('100', '1.0').removeClass('effect');		
		});
		
	});

Conclusion

This is a fairly simple tutorial and I think it's a good way to display your folio just like what we have seen on Sikker website. Do let me know if you have any questions or problems during the implementation. :) Please help me to spread this tutorial to your friends by sharing it via digg, twitter or social bookmarking tool. Thanks!