Here is simple CSS rule to convert an image to grayscale using CSS or making image appear as black and white. As far as CSS filters are supported in webkit browsers, this solution is cross-browser.
1 2 3 4 5 | img { filter: gray; /* IE6-9 */ filter: grayscale(1); /* Firefox 35+ */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ } |
And if you need to disable grayscale on hover, just add the following CSS rule too:
1 2 3 4 | img:hover { filter: none; -webkit-filter: grayscale(0); } |
VIEW LIVE DEMO