How to make image move vertically?

css3/Jquery animation/transition/: How to make image move vertically and back?

• I want to do this effect in my image (button) http://osc4.template-help.com/wt_32608/index.html# I want to make this animation whatever the method CSS3, HTML5 canvas , JS If I will use Hover property , how can I make the image slide and back when roolout

• Answer:

  First, make a < div > that will contain the animation. <div id="image_holder"></div> Then, place the < img > inside. <div id="image_holder_1" class="image_holder"> <img id="image_1" class="image" ..... /> </div> Next, add some CSS styling to the < div > like so: .image_holder { overflow: hidden; } And also some CSS to the < img >: .image { position: relative; } Now, animate the image with jQuery. Specifically, you will be animating the "top" CSS attribute for the image: $('#image_holder_1').hover( function() { $('#image_1').animate({ top: '-' + $(this).height() + 'px' }); }, function() { $('#image_1').animate({ top: '0px' }); }); See it in action here: http://jsfiddle.net/trusktr/7hTDu/ Alternatively, you can do it with CSS3 animations. Do a search for "CSS3 transitions" on google: http://www.google.com/search?btnG=1&pws=0&q=CSS3+transitions