How to make background image black and white?

Question

Are there any filters that would make background image black-and-white?

I have an image set as the background image using css, but now I need to apply a filter so that an image is shown in black and white only. Ideally, I would also like to apply opacity to it.

The effect I really trying to achieve is to have background image black/white and on hover over that span element the filter would be removed, revealing the color version.

And of course it has to work in FF, Chrome, IE

Answer 1

For CSS only, I don't think you could achieve the rollover effect with any type of a filter. You could have 2 versions of the image, one color and one b/w, combine them as one image with each version side by side, and offset the images when the mouse hovers over it, using the a CSS sprites technique...http://www.alistapart.com/articles/sprites

Answer 2

An option is to use SVG filters: http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

IE has a built in filter you can use (see answers on link).

Answer 3

I don't think CSS was ever really intended for fancy graphical 'filters' though opacity seems to be a useful exception. Just swap the background image

span:hover {opacity: 1.0 ; background-image:url(someimage.png); } 

Answer 4

Have a look at http://www.pixastic.com/lib/

Answer 5

http://webdesignerwall.com/tutorials/html5-grayscale-image-hover

"This demo is intented to show you how to make a grayscale/color image hover effect with HTML5 and jQuery. To achieve this effect before HTML5, two images are required: a color and a grayscale version. Now HTML 5 made it easier and faster because the grayscale image is generated from the original source. I hope you will find this script useful in your design such as portfolio showcase, photo gallery, etc.

The jQuery code will look for the target images and generate a grayscale version. When hovering the image, it will fade the grayscale image into color."

This should help you out!

Answer 6

Have a look at this : http://sag-3.blogspot.com/2012/11/grayscale-using-css.html

This method is pure CSS and will work in all webkit based browsers.

So the code is:

HTML :

<div id="background-image" style="background:url(image.png);"></div>

CSS :

#background-image:hover{-webkit-filter: grayscale(100%);}