01May2009
Category
jQuery
Tags

jQuery image slide on hover effect

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.

Update – 11/28

Plugin has been refactored, includes detailed documentation, and is compatible with jQuery Easing Plugin. ImgSlider Plugin is available at CodeCanyon.

Update – 11/14

A plugin has been created for this effect. Please see the post jQuery image slide on hover effect plugin.

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.

Sharing is caring.
  • Subscribe to our feed
  • Share this post on Delicious
  • StumbleUpon this post
  • Share this post on Digg
  • Tweet about this post
  • Share this post on Mixx
  • Share this post on Technorati
  • Share this post on Facebook
  • Share this post on NewsVine
  • Share this post on Reddit
  • Share this post on Google
  • Share this post on LinkedIn

Discussion

50 responses to "jQuery image slide on hover effect"

  • Emanuelle says:

    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??

    • brobison says:

      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.

    • Joby Joseph says:

      Adipoli jQuery Image Hover plugin helps you to play 20+ transition effects with a single line of code. http://jobyj.in/adipoli

  • Andrew says:

    Is it possible to change the css so that it slides left/right?

  • Lindsayanng says:

    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});
    });
    });

  • Lindsayanng says:

    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

  • Lindsay says:

    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!

  • hasan says:

    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

    • brobison says:

      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="" />

  • A.Jendrysik says:

    Thx for this tutorial, i will use it for one of our customers.

    Greetings

  • prakash says:

    how can I call the effect from external link? currently it only works when you hover your mouse on the image. I want it to be work when you mouseover or click on link outside of the container.

  • Jeff says:

    hi there, this plugin rock but i having problem with my image… do you mind to have a look what’s going wrong at my page?

    http://henshin.my/thunder/?page=products

    my image align was not right but after the hover effect the image went back to normal

    mind to have a look? if you need source code please let me know i will post it at here.

    P/S: im a beginner coder sorry if i anything go wrong.

  • Jordan says:

    Hi there. My images don’t move when you roll over them. What am I doing wrong?
    http://rctgeneration.comuf.com

  • Bassem B. says:

    Blaine,

    Been looking for this effect for a long time. Thanks a lot!

    I have a question:

    How to show several sliding pics on hover?
    For 4 frames my 200×200 DIV would have a 800×200 image inside it.
    On hover each ‘frame’ would slide over every 1 second or so, and stop at the last frame.
    On mouseout it slides all the way back to the start.

    Sort of like an automatic slider activating on hover, and resetting on mouseout.

  • masi says:

    hi. i went through lots of image scrolling jquery stuff, but this is the best ive seen and i would like to implement this to my website. But I am a newbie and could you pease tell me what think I should do to get this right? Pls. Thanks Heaps

  • jason says:

    thank you! you don’t even know how long I searched tried to figure this out by myself until I finally broke down and did a web search and found you guys. And it worked perfectly!

  • Most simple solutions I’ve found online don’t work properly. This is just perfect. Thanks!

  • Ken Kelleher says:

    Question for you, would like to add easing, how do I add it to your string?

    // Horizontal
    $(“#horizontal div a”).hover(function(){
    $(“img”, this).stop().animate({left:”-338px”},{queue:false,duration:200});
    }, function() {
    $(“img”, this).stop().animate({left:”0px”},{queue:false,duration:200});
    });
    });

  • Rog says:

    Thanks Brobison for the script. I saw a similar animation that was Flash based and have had it in mind to build a jQuery version ever since. You’ve saved me a lot of time.
    Best wishes,
    Rog

  • Delano says:

    Hello,

    I have a quick question.
    On my website I have different width and heights of divs.
    My version would be to give all the images a seperate function
    e.g.
    //Picture 1
    $(“#pic1 div a”).hover(function(){
    $(“img”, this).stop().animate({left:”-296px”},{queue:false,duration:200});
    }, function() {
    $(“img”, this).stop().animate({left:”0px”},{queue:false,duration:200});
    });
    });
    ———————————————————————————————————

    //Picture 2
    $(“#pic2 div a”).hover(function(){
    $(“img”, this).stop().animate({left:”-296px”},{queue:false,duration:200});
    }, function() {
    $(“img”, this).stop().animate({left:”0px”},{queue:false,duration:200});
    });
    });

    And so I would continue just because i have different width and heights on those images.
    Is this the right way to do it or is there a shorter version?

    Thank you in advance.

  • Ravi says:

    Hi, any idea how I would integrate this into my WordPress home page?

  • Rich says:

    Hi, so I spent ages trying to get this to work to no success.

    It was only when I finally put this line in;

    “”

    that it did.

    Is this true?

    Is this line needed for it to work, or am I missing something?

  • Rich says:

    the source for the jquery.min.js line within the script tags

  • Marco says:

    That’s exactly what I was looking for and it’s working well. Thanks a lot.

  • Thanks for the good plugin. Well documented and easy to use. Is there an option to use it with captions as well?

    thx in advance,
    Xavier

    • brobison says:

      This script can be used for elements other than images, including text. Be sure to call the plugin on the parent element for whatever you would like to animate.

  • Dan Hicks says:

    Brilliant script! I’ve been looking for womething like this for ever!

    Just one question though: I noticed when the script first loads it shows the ‘hover’ state. I’m using transparent PNGs to create a rollover sliding menu so I would prefer it stayed in the ‘off’ state initially but I can’t seem to find how to change it. Can you shed some light on this?

    Regardless, thanks a bunch!
    Dan

  • FreakRadi says:

    hey!! can you tell me how make it work in blogger blog?

  • edario says:

    Thank you for the code!

Leave a Comment