Easy image rollovers

10 December 2008

Recently themeforest.net ran a quick tutorial on how to achieve an image slide effect similar to our homepage. I thought I’d go into some more detail about the design decisions we made.

Here’s the exact jQuery code used:

$('#body_home #our_work li').hover(function(){
	$(this).find('img').animate({top:'139px'},{queue:false,duration:500});
}, function(){
	$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
});

There’s really not that much! First, we select all the <li> elements inside our ‘our_work’ block on the homepage. Each of these is a picture and a block of text wrapped in a link. By using an id to define the block we let jQuery find it very quickly: the browser maintains a list of all elements with an id attribute that jQuery can hook directly into.

Once we’ve got our blocks we can apply hover functionality to them. The first method passed into the hover handler is our slide down animation and the second is our slide up. We find the <img> element inside each block and animate it away from the top. In our case we’ve chosen half a second (500ms) for a complete slide down and up, and by passing in queue:false we make sure the slide up cancels the slide down if the user mouses out of the block while it’s animating. I’ve chosen to animate the image down by 139px because that’s the exact height of the image: just enough to take it off screen.

From a CSS point of view it’s still kept pretty simple:

#our_work li{
	float:left;
	margin:0 30px 95px 0;
	padding: 5px 7px 8px 5px;
	width:258px;
}

#our_work li a {
	display: block;
	position: relative;
	overflow: hidden;
	height: 107px;
	width: 226px;
	padding: 16px;
}

#our_work li a:focus, #our_work li a:hover { text-decoration: none; }

#our_work li img {
	position: absolute;
	top: 0;
	left: 0;
	height: 139px;
	width: 258px;
}

The <li>s are floated left to make them line up and given some margin and padding, and a set width. Inside each <li> we have an <a> element which wraps around the <img> and associated text. We give this display:block and a fixed height and width so that it acts as complete clickable area. Because the <img> is inside this it’s also clickable. By making the <a> position relative it acts as a positioning parent for the <img>: when we set the <img> to position absolute it’ll reference its co-ordinates from the top left of the <a>. Finally, the overflow:hidden hides the <img> when it slides outside the <a>. Simple!

Final touches we’ve added are to style the text with a nice font and size and add a little background folded-corner image, but this is obviously easily customisable for whatever style you want.

One thing that’s very important to take care of whenever you’re writing Javascript is to cope when JS isn’t available. For our blocks we decided to just show the images. Because they are still inside the link they can be clicked, so the user can go through to the info page for that project. Screenreader users should also be read the description text from behind the image as we’re not hiding it.

Drop me a comment if you’re interested in hearing about other jQuery effects we’ve done on this site and others from our portfolio and I’ll write some more about it.