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

javascript jquery css grayscale
laukok picture laukok · May 13, 2011 · Viewed 11k times · Source

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

locrizak picture locrizak · May 13, 2011

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

Related questions

Color to grayscale on hover not working in IE11

I'm using Gray for a few elements on the site. However, I can't get it to work in IE11. For example, in the fiddle below, I use JS to add the grayscale and grayscale-fade classes so that the image fades …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More