HTML5 Grayscale Image Hover
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)
Need more info about HTML5? Download our HTML5 eBook for free and enjoy its quality.