Making a Cool Spotlight Effect with jQuery

In this tutorial we will make an amazing effect i saw on a portfolio of an argentinean designer which is so great i had to write a tutorial about it. Here it is…

First of all…

… i would like to say thanks to Nicolás Calabrese, on whose website i found this cool effect.

How it looks

Let’s start…

HTML

<!-- start spotlightWrapper div -->
<div class='spotlightWrapper'>
	<!-- start unordered list -->
	<ul>
		<li><a href='#'><img src='images/1.jpg' /></a></li>
		<li><a href='#'><img src='images/2.jpg' /></a></li>
		<li><a href='#'><img src='images/3.png' /></a></li>
		<li><a href='#'><img src='images/4.jpg' /></a></li>
		<li><a href='#'><img src='images/5.jpg' /></a></li>
		<li><a href='#'><img src='images/6.png' /></a></li>
		<li><a href='#'><img src='images/7.jpg' /></a></li>
		<li><a href='#'><img src='images/8.jpg' /></a></li>
		<li><a href='#'><img src='images/9.PNG' /></a></li>
		<li><a href='#'><img src='images/10.jpg' /></a></li>
		<li><a href='#'><img src='images/11.png' /></a></li>
		<li><a href='#'><img src='images/12.png' /></a></li>
		<li><a href='#'><img src='images/13.jpg' /></a></li>
		<li><a href='#'><img src='images/14.png' /></a></li>
		<li><a href='#'><img src='images/15.jpg' /></a></li>
		<li><a href='#'><img src='images/16.jpg' /></a></li>
		<div class='clear'></div>
	</ul>
	<!-- end unordered list -->
</div>
<!-- end spolightWrapper div -->

The HTML is pretty simple, we have a wrapper DIV with class spotlightWrapper, inside of it we have an unordered list which holds our list items with anchors and images.

As you can see after the last list item we have a DIV with class clear which we will use to clear the float.

CSS

.spotlightWrapper ul {
	list-style-type: none; /* remove the default style for list items (the circles) */
	margin:0px; /* remove default margin */
	padding:0px; /* remove default padding */
}
.spotlightWrapper ul li {
	float:left; /* important: left float */
}
.spotlightWrapper ul li a img {
	width:200px; /* you don't need this, i just rescaled the images they are bigger then i want them to be ' */
	position:relative; /* so we can use top and left positioning */
	border:none; /* remove the default blue border */
}
.spotlightWrapper ul li a img.active {
	border:4px solid white; /* choose whatever you like */
	z-index:1; /* show it on top of the other images (they have z-index 0) */
	left: -4px; /* same as border width but negative */
	top: -4px; /* same as border width but negative */
}
.clear { clear:both; } /* to clear the float after the last item */

Nothing special in the CSS. The active class will be set to an image when mouse is over it and removed when mouse leaves it. And don’t forget that you must set left and top values same as the border width but as a negative number (so when we add the border the image position will be the same as without the border).

jQuery

$(window).load(function(){
	var spotlight = {
		 // the opacity of the "transparent" images - change it if you like
		opacity : 0.2,

		/*the vars bellow are for width and height of the images so we can make
		the <li> same size */
		imgWidth : $('.spotlightWrapper ul li').find('img').width(),
		imgHeight : $('.spotlightWrapper ul li').find('img').height() 

	};

	//set the width and height of the list items same as the images
	$('.spotlightWrapper ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight });

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

		//...find the image inside of it and add active class to it and change opacity to 1 (no transparency)
		$(this).find('img').addClass('active').css({ 'opacity' : 1});

		//get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array
		$(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ;

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

		//... find the image inside of the list item we just left and remove the active class
		$(this).find('img').removeClass('active');

	});

	//when mouse leaves the unordered list...
	$('.spotlightWrapper ul').bind('mouseleave',function(){
		//find the images and change the opacity to 1 (fully visible)
		$(this).find('img').css('opacity', 1);
	});

});

I know, it looks like it’s complex and big but it just looks like that because of the comments and empty rows to make it cleaner.

You probably noticed we are using $(window).load instead of $(document).ready, that’s because we want the images to be loaded too before we fire up the jQuery. If you want you can use $(document).ready but you need to change the imgHeight and imgWidth inside spotlight options to whatever the width and height of the images are.

That’s it

Isn’t it a cool effect, and so easy to be made. I hope you like it and if you do please support it by tweeting, digging, upvoting on dZone or Reddit or bookmark it with delicious. Thanks for reading…

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.