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.

Applying hover effect to display color

Simply add the following styles to the page.

View Demo

Download Source code (180 KB)

Published by

Sumith Harshan

Sumith Harshan is the Web Engineer Specializes in Java Script, JQuery, HTML4/5, CSS2/3, PHP, CodeIgniter, CakePHP, J2SE, J2EE, XML, Hacking & Security, Mobile Interface Developing, Magento, Wordpress, Joomla, Drupal,PHPBB,Facebook App Developing and Open cart...etc.