5

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'??

Community
  • 1
  • 1
laukok
  • 47,545
  • 146
  • 388
  • 689

4 Answers4

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.

Sébastien Gicquel
  • 3,651
  • 6
  • 43
  • 77
2

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

locrizak
  • 11,687
  • 11
  • 56
  • 80
  • 1
    +1 for :hover, although if you are loading a lot of images this way, it might be better to keep them separate images to speed up the initial load of the website and then start fetching them silently once the page loads. Probably beyond the scope of any given user's need. – Levi Morrison May 13 '11 at 14:34
  • Yeah the silent loading is what I would do as well. – locrizak May 13 '11 at 14:37
1

In my answer, I'm addressing only the image creation.

In your case, you'd be better manually pre-rendering the desaturated images using Photoshop (etc).

If you don't want to manually pre-render the desaturated images, I'd recommend using PHP (or whatever server-side language you have) to do it.

If that's not an option, you can use JavaScript to make desaturated images, see:

http://www.pixastic.com/lib/docs/actions/desaturate/

thirtydot
  • 210,355
  • 44
  • 377
  • 337
1

You can do it using canvas: http://spyrestudios.com/html5-canvas-image-effects-black-white/

In IE you'll need something like ExplorerCanvas: http://excanvas.sourceforge.net/

Nathan
  • 106
  • 1