How To Make an Image Greyscale in CSS
One common technique used on websites to add interactivity to a page involves rendering an image, or a set of images, in greyscale and switching back in a colour version when the mouse is rolled over.
Obviously having this functionality in webkit wouldn't usually be sufficient to roll this method out on the wider web, but fortunately both Gecko and Trident have broadly equivalent functionality to achieve the same effect.
This method works from Webkit build 535.19, which was included in Chrome 18 and will work in Safari from version 5.2.
IE / Trident
Trident has included the filter function for... forever. So this should probably work most versions of IE.
Firefox / Gecko
Gecko sadly hasn't yet implemented the full filter specification, but their existing implementation will allow you to combine their filters with an SVG layer in order to obtain the same effect. This requires an SVG file in addition to the css rule.
Which can then be included in as a rule:
So we can put this together into a single ruleset: