Tutorials HTML and CSS Tutorials HTML5 Grayscale Image Hover

HTML5 Grayscale Image Hover

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.

image 1

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)

image 2


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.

Need more info about HTML5? Download our HTML5 eBook for free and enjoy its quality.

subscribe to newsletter
Enter your email address to receive this free download.