jQuery image slide on hover effect
May 1st, 2009 | jQuery
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.
Update – 11/14
A plugin has been created for this effect. Please see the post jQuery image slide on hover effect plugin.
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.
Related Posts
14 Responses to “jQuery image slide on hover effect”
Leave a Reply
Categories
Recent Comments
- brobison said: By default, images don't receive the same type of...
- A.Jendrysik said: Thx for this tutorial, i will use it for one of ou...
- hasan said: i used ur code in my site..but in ie7 and ie8 dont...
- Lindsay said: THANKS A BUNCH!! You need to add a blog plugin tha...
- brobison said: I just created a plugin which should address your...
- Lindsayanng said: wow.. I am REALLY having some issues with getting...
Hi
I would like to use this jquery. But where are the hover images? And how are they called?
I see here: image-1.jpg
where is the hover image for it and how should I call it??
The default and hover states are actually one image. Click here to see an example.
Since we only want to display the default portion of the image first, we need to apply some CSS to the parent div to hide the hover state. We do this with the following code:
#container div {margin-right:3px;
float:left;
width:296px;
height:130px;
border:1px solid #999;
position:relative;
overflow:hidden;
}
Notice that the width is identical to that of the image, but the height is only half that. ‘Overflow:hidden’ is then used to hide the rest of it. When the user hovers over the image, jQuery is used to slide it upwards revealing the hover state.
Is it possible to change the css so that it slides left/right?
It’s not really a questions of changing the CSS but actually jQuery. I’ve update the demo page to show you how to create the same effect horizontally, from left to right.
Thanks a lot – I wanted a slide-out effect for navigation tabs. This is perfect with a transparent png!
Certainly! I’d be interested in seeing how you incorporate a transparent png. Feel free to share a link when it’s up and running.
Hey.. thanks for posting this. i am AMAZED at how easy it was to get going..
I have a quick question though.. what if you have 3 different containers that I all want to animate vertical.. How would I add the other div names to the javascript.
I tried just repeating this code with the new div name, but it didn’t seem to like it repeated. I am new with javacrip, so sorry if this is a stupid question:
$(function(){
// Vertical
$(“#vertical div a”).hover(function(){
$(“img”, this).stop().animate({top:”-130px”},{queue:false,duration:400});
}, function() {
$(“img”, this).stop().animate({top:”0px”},{queue:false,duration:200});
});
$(“#verticalCorp div a”).hover(function(){
$(“img”, this).stop().animate({top:”-130px”},{queue:false,duration:400});
}, function() {
$(“img”, this).stop().animate({top:”0px”},{queue:false,duration:200});
});
});
wow.. I am REALLY having some issues with getting this to work for me. The issue really is that I will have 3 DIFFERENT containing divs in 3 different locations on the website.. So i can’t really place them separately if I have no idea how to call different named divs within the javascript
I just created a plugin which should address your issue. Please see this post – http://spoonfedproject.com/jquery/jquery-image-slide-on-hover-effect-plugin/
THANKS A BUNCH!! You need to add a blog plugin that lets commentors get notifications of follow up comments on posts.. i almost completely forgot about this!
[...] 8. jQuery image slide on hover effect [...]
i used ur code in my site..but in ie7 and ie8 dont show the mouse cursor when out of images…its only visible hover on a linked image or link..
can you help me..
thanks
By default, images don’t receive the same type of cursor as links do. Thanks to CSS, we can change the mouse cursor by using the cursor property. Try something like this:
.pointer {cursor:pointer}
<img class="pointer" src="path-to-image.jpg" alt="" />
Thx for this tutorial, i will use it for one of our customers.
Greetings