Last Updated:

Focus on the active image

There are a lot of images on your site and you would like to highlight the images when you hover the mouse cursor over it, then this tutorial is for you. In this tutorial, we'll look at how to focus on an active image using jquery. The effect is as follows, when the user moves the cursor over the image, it is slightly enlarged, while all other pictures are darkened. This solution is ideal for a different kind of portfolio. With a few lines of code, you can make sure that the visitor is not distracted by other images.
 

To begin with, we will connect the framework that will be responsible for the effects when focusing, this line of the script is placed between the head tags:

 

Next, we will look at the structure of HTML itself, In this section of the code, everything is very simple. We have a wrapper with a spotlightWrapper class. Inside is an unordered list that contains list items with anchors and images.

<!-- start spotlightWrapper div -->
<div class='spotlightWrapper'>
<!-- start of 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 of unordered list -->
</div>
<!-- end spolightWrapper div -->

The next step is CSS styles. There's also nothing extraordinary about the styles.

 

The active class will belong to the image when you hover over it. And don't forget that your left and top values have the same values as border-width, but with a "-" sign.

.spotlightWrapper ul {
list-style-type: none;
margin:0px;
padding:0px;
}
.spotlightWrapper ul li {
float:left; /* important: left float */
}
.spotlightWrapper ul li a img {
width:200px;
position:relative;
border:none;
}
.spotlightWrapper ul li a img.active {
border:4px solid white; /* here you can set the style of the border when highlighting */
z-index:1; /* show above other images (they have z-index 0) */
left: -4px
top: -4px;
}
.clear { clear:both; }

The final step will be jQuery. The code below may seem complicated to you, but it really isn't:

$(window).load(function(){
var spotlight = {
// transparency of images - can be changed
opacity: 0.2


/* variables below for image width and height to
our <li>s were the same size */
imgWidth : $('.spotlightWrapper ul li').find('img').width(),
imgHeight : $('.spotlightWrapper ul li').find('img').height()


};


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


//when hovering the mouse...
$('.spotlightWrapper ul li').hover(function(){


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


//take other list items and change their transparency
$(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ;


//when moving the mouse...
}, function(){


//... find the image and remove the active class
$(this).find('img').removeClass('active');


});


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


});

Instead of $(document).ready, we use $(window).