How do you create grayscale/ black and white image using css?In this post is describing how to create grayscale/ black and white image using css and applying display colors of this image when mouse hover event.

First you must create a file named “filters.svg” and keep that file with your file.Inset the following code to that filters.svg file.

Full script is here.

Applying hover effect to display color

Simply add the following styles to the page.

	img:hover {
		filter: none;
		cursor:pointer;
		-webkit-filter: grayscale(0);
		-ms-filter: grayscale(0);
	}

View Demo

Download Source code (180 KB)