Basic Image Rollover Effect with jQuery and HTML5 - Hover In / Out

A basic jQuery based image rollover effect that allows to switch between two images inside a container as you hover in and out.

How to use it:

1. Insert two images of equal width and height (you can use any image you like) to your web page. When the mouse hovers on an image, have that image fade out and have another image fade in (on the same position). When the mouse hovers out of the image, bring the original image back.

<img src="before.jpg" data-alt-src="after.jpg">

2. Include jQuery JavaScript library on your webpage where needed.

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

3. The core JavaScript to active the image rollover effect. HINT: the jQuery .hover() function accepts 2 functions as parameters: the first function runs the code for when we enter the area with the mouse, the second writes the code for what we want to happen when the mouse leaves the area!

$(document).ready(function(){

  $("img").hover(function() {
    var temp = $(this).attr("src");
    $(this).attr("src", $(this).attr("data-alt-src"));
    $(this).attr("data-alt-src", temp);
  });
})

---

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