jQuery image slide on hover effect

This is a simple technique to animate an image when hovering using jQuery’s animate() effect. We will use this effect to manipulate our CSS, creating a seamless transition between two areas of an image. Have a look at the demo below for a better understanding.

Demo

Xhtml

<div id="container">
	<h1>jQuery image slide on hover effect</h1>
	<div><a href="#"><img src="image-1.jpg" alt="" /></a></div>
	<div><a href="#"><img src="image-2.png" alt="" /></a></div>
	<div><a href="#"><img src="image-3.jpg" alt="" /></a></div>
</div>

The markup itself is quite basic. We have three divs that contain image links. Notice that each image contains both its default and hover states. This is done to create our animation.

CSS

/* simple reset */
html,body,div,h2,img {margin:0;padding:0;border:none;}

html {
	font:1em Arial, Helvetica, sans-serif;
	color:#444;
}
h1 {	text-align:center;}
#container {
	margin:100px auto;
	width:909px;
}
#container div {
	margin-right:3px;
	float:left;
	width:296px;
	height:130px;
	border:1px solid #999;
	position:relative;
	overflow:hidden;
}
#container img {
	position:absolute;
}

Since we only want to show the image’s default state first, we set the height and width of the containing div, and set overflow to “hidden”. We will be absolutely positioning the image, so we also need to set the divs position to “relative” and the images to “absolute”>.

jQuery

$(function(){
	$("#container div a").hover(function(){
		$("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
	}, function() {
		$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
	});
});

To get things rolling, we first run a hover function on our link tag. Before running our animation, we use the stop() method to cancel the animation queue if one exists. The animate effect uses the CSS Top property to reveal the image’s hidden hover state, sliding it upwards over a period of 200 milliseconds. We also set the queue to “false” so that the animation will start automatically without having to wait for its turn.

And there you have it… an easy way to create a hover animation using jQuery.