The Purpose
This demo is intented to show you how to make a grayscale/color image hover effect with HTML5 and jQuery. To achieve this effect before HTML5, two images are required: a color and a grayscale version. Now HTML 5 made it easier and faster because the grayscale image is generated from the original source. I hope you will find this script useful in your design such as portfolio showcase, photo gallery, etc.
Your Ad Here
jQuery Code
The jQuery code below will look for the target images and generate a grayscale version. When hovering the image, it will fade the grayscale image into color.
How to use it
To apply this to your site:
include a copy of jquery.js
paste the code as shown above
set the target image (eg: .post-img, img, .gallery img, etc.)
you may change the animation speed (ie. 1000 = 1 second)
Read more: http://www.webdesign.org/html-and-css/tutorials/html5-grayscale-image-hover.19580.html#ixzz1YJgwxbTx