Jquery Image Slide on Hover

Hello,
In this post I will share  about  a simple jquery to animate an image when hovering. basically it is using jQuery’s animate() effect. I will use this effect to make transaction when hovering the image.
Let's looks the demo in the url below :
Jquery Image Slide

Ok, I begin with html code :

<div id="vertical" class="clear">
    <!-- Vertical -->
    <h2>jQuery image slide on hover effect (vertical)</h2>
    <div><a href="htmldrive.net"><img src="image-2.png" alt="" /></a></div>
    <div><a href="#"><img src="image-1.jpg" alt="" /></a></div>
</div>
<div id="horizontal" class="clear">
    <!-- Horizontal -->
    <h2>jQuery image slide on hover effect (horizontal)</h2>
    <div><a href="#"><img src="image-4.jpg" alt="" /></a></div>
    <div><a href="#"><img src="image-5.png" alt="" /></a></div>
</div>
<div id="easeOutBounce" class="clear">
    <!-- Horizontal -->
    <h2>jQuery image slide on hover effect (easeOutBounce)</h2>
    <div><a href="htmldrive.net"><img src="image-2.png" alt="" /></a></div>
    <div><a href="#"><img src="image-1.jpg" alt="" /></a></div>
</div>

We have 3 main div contain image links. each image has two face, maybe it will easier when you look image below :

image-1.jpg

  


image-2.jpg

Then defined simple jquery.imageslide.js to make it work, you can download full source Jquery Image Slide.

jquery.imageslide.js has 3 transaction type (vertical, horizontal,easeOutBounce) and you can use it with multiple images

Now you can set up the property of image slide as below:

<script type="text/javascript">
        $(document).ready(function(){
            $('#vertical div a').imgslide({
                width: 296,
                height: 130,
                animate : "vertical",
                duration : 300
            });
            $('#horizontal div a').imgslide({
                animate : "horizontal",
                duration : 300
            });
            $('#easeOutBounce div a').imgslide({
                animate : "easeOutBounce",
                duration : 800
            });
        });
    </script>

Run your code, it will work like a charm ^^.
That's all, hope it useful

Best regard,
Bayu Prawira