Create A good looking Grayscale Image Hover In HTML5 | blogfreakz.com

Create A Grayscale Image Hover In HTML5 | blogfreakz.com:

Create A Grayscale Image Hover In HTML5

It used to be that shifting an image from grayscale to colored and vice-versa as you hover over it required 2 copies of the said image — one in grayscale and the other in color. But thanks to Darcy Clarke for the JavaScript & HTML 5 grayscale in this tutorial, this feat is easier and faster because the grayscale image is generated from the original source.

Click on the above image for the demo.

Steps:

1. Get a copy of jquery.js
2. Paste the code below onto your web page. What the code will do is look for the target images (.item img) and then generate a grayscale version.