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

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…

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

First of all…

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

How it looks

howitlooks

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.

Related posts:

  1. Making A Cool Thumbnail Effect With Zoom And Sliding Captions
  2. Cool navigation menu made with JQuery
  3. Making image captions using jQuery
  4. Make a custom tab interface with JQuery
  5. Making a jQuery infinite carousel with nice features

Slobodan Kustrimovic

This author has yet to fill his BIO.

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

Comments

  • Hi

    Great effect! Would it be easy to use the jquery fade effect and fade in the opacity on hover?

    Chris

  • it’s really cool~

  • @Chris, @magicshui – Glad you like it :)

    @Chris Yea, it’s easy.

    jQuery line 20 instead of .css({ ‘opacity’ : 1}) put .animate({ ‘opacity’ : 1}, 500);
    jQuery line 23 instead of .css({‘opacity’ : spotlight.opacity}) put .animate({ ‘opacity’ : spotlight.opacity}, 500)

    Just change 500 with how much miliseconds do you want the animation to be.

  • Great post! Very useful.

  • Hey this is a nice effect here. I am sure it will come in handy to someone who needs to emphasize thumbnails in their web design whether it be for portfolios or image galleries.

  • I tried this out and it worked. Thanks for this simple and wonderful example.

  • Hey, i tried this out and i found some sort of bug in it.
    When you hover over an image the rest is of the images are faded out, to get every image back you just simply move you mouse to a part where there are no images..
    when you do this in the example on the last row, there are 3 spots for images that aren’t there, when hovering here all images stay faded out, instead of coming back.
    Don’t know if this is considered a bug or not, but it isn’t a nice effect.

  • @Bas – Not a bug, you are still in the images container.

  • That is what i thought, but is it possible to make all images normal again when hovering over those empty spots within the container?

  • @Bas – Yes, but that would need changing the most of the jQuery coding. This was planned to be used on projects where you won’t have that blank space.

  • I copied this method exactly, yet my list items seem to be stacking on-top of one another rather than spacing themselves out by content width/height. Any idea what I’ve done wrong?

  • I wonder, can this be used with a vertical sliding content website? When i applied this showcase the vertical sliding stopped working and my navigation acts like a normal link.

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting