Get Our Free Ebook
Beginners Guide to HTML

  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.