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)
