Pretty Hover Effects with CSS and jQuery

This article will show you how to create pretty hover effects for your images using jQuery and CSS. The plan is to use a clean mark up, adding the necessary elements on the fly. What this means is that we are starting from barebones image HTML tags, with title attributes only. This can come useful especially if you already have hundreds of images that you want to apply this effect on.

Take a look at our markup:

1
2
3
4
5
6
7
8

<ul>
<li><img src="images/77335_4871.jpg" title="Autumn Leaves" /></li>
<li><img src="images/107023_5283.jpg" title="Cloudy Skies"  /></li>
<li><img src="images/1282015_12556521.jpg" title="Nice Horsy"  /></li>
<li><img src="images/1262387_19591724.jpg"  title="Grassy Meadows" /></li>
<li><img src="images/220121_3233.jpg" title="Jigsaw Pieces"  /></li>
<li><img src="images/1282209_96954111.jpg" title="Retro Groove"  /></li>
</ul>

Pretty clean right? Ok, now we start manipulating and styling with code:

Step 1: Wrapping Elements with jQuery

We are going to use jQuery to find all these images in a list item and check if it has a title attribute. If it does, it will wrap the image in a DIV with class name “wrapper”.

1
2
3
4
5
6
7

$(document).ready(function(){									
		var thumbs = $("ul li img");		
 
		for (var i = 0, ii = thumbs.length; i < ii; i++){
			if (thumbs[i].title && thumbs[i].title.length > 0)
			{								
				$(thumbs[i]).wrap('<div class="wrapper" />')

jQuery will also take the contents of the image’s title and place it inside another DIV called “caption” and place it inside wrapper, right after the image itself. Finally, let’s remove the title attribute from the image tag.

1
2
3
4
5
6

var imgtitle = thumbs[i].title;	
after('<div class=\'caption\'>' + imgtitle + '</div>').
				removeAttr('title');
 
			}					
		}

Now take a look at our mark up when the document loads:

1
2
3
4
5
6
7

<ul>
<li>
<div class=”wrapper”><img src="images/77335_4871.jpg" /></div>
<div class=”caption”> Autumn Leaves</a>
</li>
...
</ul>

Pretty slick right? Now let’s move forward.

Step 2: General Styling with CSS

Now that we have our DIVs in place, we can now set up the general styles with our stylesheet. What we’re trying to achieve is to hide the caption from a viewing area set on its containing DIV: wrapper.

Take a look at our stylesheet:

1
2

div.wrapper{width:218px; height:218px; overflow:hidden; position:relative;  }
div.caption {position:relative; text-align:center; padding:55px 15px}

Note that the wrapper dimensions are taken from how wide and tall the images are.

Step 3: Events and More Styling with jQuery

Now back to our script, all we need to do now is assign a couple of events to the hover method of our wrapper DIV. Thankfully, jQuery’s .hover() simplifies this action by letting us bind two handlers (in and out) all within the same context.

All we need to achieve is a way to slide the caption DIV upwards when we hover (maybe decrease the opacity of the image), then slide the DIV back downwards when we mouse out:

1
2
3
4
5
6
7
8
9
10

$('.wrapper').hover(
		function(){
			$(this).find('img').animate({opacity: ".6"}, 300);		
			$(this).find('.caption').animate({top:"-85px"}, 300);			
		}, 
		function(){
			$(this).find('img').animate({opacity: "1.0"}, 300);					
			$(this).find('.caption').animate({top:"85px"}, 100);
		}		
		);

Notice that I also used the .animate() function for manipulating the CSS properties which renders all of our effects smoothly.

Optional Pretty Styling:

For demonstration purposes I’ve added pretty backgrounds, as well as font types to maximize the effect. Simply add a background to the DIV caption, and assign different font types and styles (check out Google Fonts).

There you have it. You have just created your own image hover effects using jQuery and CSS. You can download the source code from here, or view the live demo.

Please feel free to comment below on what you think of this tutorial.