HTML5 Tutorial: Creating HTML5 Grayscale Image Hover

This is an elegant HTML5 Tutorial that will make you learn how to create HTML5 grayscale image hover. This can be achieved by employing HTML5 & jQuery as well as HTML5 Canvas that will render a image in grayscale.

In this highly revolutionized era HD quality of images, grayscale and black & white images has still buoy their significance. Earlier, we didn’t have automated tools and applications to render a color image in grayscale or black & white and hence it was converted manually in context of displaying it over web. But now in recent it is possible by HTML5. In account of HTML5 Canvas, you can manipulate any images into grayscale even without any help of image editing software. Yes, it can be achieved in very simple and easy way by employing HTML5 & jQuery dynamically.

However, in order to achieve this effect with HTML5, you required two images one color and another grayscale. Now, HTML5 transform it more affable and faster as the grayscale image is rendered from original source. Hopefully, this script will be beneficial to design a photo gallery or portfolio showcase, etc.

jQuery Code

The below provided jQuery code will find out the target images and create a grayscale version of that. When you will make your mouse point hover over the image, the grayscale image will fade into color.

How to use it

However, in order to employ this to your site you are supposed to follow the instructions as below:

  • first of all add a copy of jQury.js
  • Then, paste the above provided code
  • Now, define the target image. For example: post-img, img, .gallery img, etc.
  • Later, if you want you can modify the speed of animation (i.e. 1000 = 1 second)

However, this works successfully with all HTML5 and Javascript browsers such as Google Chrome, Firefox and Safari. In the case if HTML5 is not compatible, this automatically fallback to the original version of color image. Also, if it doesn’t execute with Chrome and Firefox locally, you will have to put the HTML file over a web server.


Steven Bowen

Steven Bowen is an ardent team member of No-refresh - Web to Print Design Tool Provider Company bestowed with professionalism in to develop fully-functional solutions. Having adroitness in this arena, he has served an array of blogs that are basically based on the technology advancement & improve the end users’ information level.