Question

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 1

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