How to Convert an image to grayscale using CSS

Published on Author Code Father
How to Convert an image to grayscale using CSS? Want to display a color bitmap in grayscale with just HTML/CSS?

Suppose, we have a following image HTML:

<div id="imgGrey"><img src="image.jpg"></div>

So, by default this will display the original image with actual color.
But, if we want to display the image as a greyscale and hovering mouse, we want to display the actual color the the following code can help.

#imgGrey img {
filter: gray; /* For IE6-9 */
filter: grayscale(1); /* For Microsoft Edge and Firefox 35+ */
-webkit-filter: grayscale(1); /* For Google Chrome, Safari 6+ & Opera 15+ */
}

/* Now disable grayscale on hover */
#imgGrey img:hover {
filter: none;
-webkit-filter: grayscale(0);
}

CSS filters also allow much more than just adjusting the grayscale and remember that if the user chooses to download the image, then this will be downloaded in its original colored displays. So, for online display purposes, CSS filters can do the little trick!

Comments

comments