Creating grayscale images with CSS

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.






Creating grayscale/black and white images with CSS
  




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)