Convert Images to Grayscale with CSS Filters

Here’s a tiny piece of code which can used to convert normal images to grayscale. Using the following CSS code snippet you can convert coloured photos to black and white images. However, note that if the user downloads the image, it will be displayed in its original coloured format.

Useful Read : How To Equalize Heights of Divs?

To apply the grayscale, use the following CSS code.

img.grayscale {
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	filter: grayscale(1);
}

To apply the grayscale with hover effect, use the following CSS code,

img.photo{
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	filter: grayscale(1);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
}
img.photo:hover{
	-webkit-filter: grayscale(0);
	-moz-filter: grayscale(0);
	filter: grayscale(0);
	cursor: pointer;
}

0 Comments

Leave a Comment.