CSS: how to turn an colour image to a grey or black/white image [duplicate]

Question

Possible Duplicate:
Convert an image to grayscale in HTML/CSS

How can I turn an colour image to a grey or black/white image like this website with CSS?

Can it be done solely on CSS or do I need JavaScript (jQuery)?

Thanks.

Edit:

Thanks for the answers guys. I notice that the trick is to make two different colour images - one is full colour and the other is b/w. I was hoping this can be done in one single image. So there is no way to do that isn't apart from the 'trick'??

Answer 1

To make it look really sweet id use jQuery and fade between the two check out this tutorial by Soh Tanaka. (I looks like this site did a variation of this tutorial.)

You can however do this with just css by creating an image sprite and changing the background position on :hover

Answer 2

You can also try this jquery plugin greyScale

The effect can be done with one single image.

EDIT : I recommend also this Black and white jQuery plug in by Gianluca Guarini : This is easier to modify css.