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.
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)
Chrome, Safari, and Firefox. If HTML5 is not supported, it will fallback
to original color image. Note: if it doesn't work with Firefox and
Chrome locally. You need to put the HTML file on a web server.