It is now easier than ever to make an image greyscale in CSS.
[prettify class=”xml”]
<svg xmlns=”http://www.w3.org/2000/svg”>
<filter id=”grayscale”>
<feColorMatrix type=”matrix” values=”0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0″/>
</filter>
</svg>
[/prettify]
Then use this to make a greyscale:
[prettify class=”css”]
img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
[/prettify]
and then ungreyscale
[prettify class=”css”]
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
[/prettify]
Of course, i got this from stack overflow: http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css
keywords: css grey scale