Smooth Image Rollover Effect with jQuery and CSS3 - imghover

imgHover is a super tiny jQuery plugin which allows you to apply smooth 'rollover' effects on images as you mouse hover.

See also:

• jQuery Plugin For Smooth Rollover Image Effects - imageChanger

How to use it:

1. Prepare and insert 2 images into your web page as follow.

<div id="demo" 
     data-imghover="before.png | after.png">
</div>

2. Include the jQuery imgHover plugin after you have jQuery library loaded.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.imghover.js"></script>

3. Call the plugin on the DIV element and set the animation delay for the rollover effect.

$("#demo").imghover({

  // width of the image
  width: 256,

  // height of the image
  height: 256,

  // animation delay
  delay: 250

});

---

This awesome jQuery plugin is developed by mertkahyaoglu. For more Advanced Usages, please check the demo page or visit the official website.