HTML5 Grayscale Image Hover

Use HTML5 & jQuery to dynamically clone color images into grayscale

Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software.

This demo is intended 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.

Comments

Be the first to write a comment

You must me logged in to write a comment.