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.
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)
Compatibility
It works with any browser that support HTML5 and Javascript such as
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.
