Convert image to grayscale using CSS Filters

To start off, I just came across the image graystyle using css and found it quite interesting, so thought of a share.

This example shows how one can roll over gray style and coloured image on mouse hover magically only using CSS.

One more thing to highlight in this is, CSS Filters are part of CSS3 if I am not mistaken and might not work in the browsers not supporting CSS3, but I guess we as developers can always find alternatives.

Here is a simple code snippet to demonstrate the above example

 
img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>#grayscale");
    -webkit-filter: grayscale(0%);
}

svg image {
    transition: all .6s ease;
}

svg image:hover {
    opacity: 0;
}
 

You can download the demo file here