Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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 Firefox, Chrome and Internet Explorer.

share|improve this question
    
demosthenes.info/blog/532/… –  Martijn Apr 25 at 13:02
add comment

7 Answers 7

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

share|improve this answer
    
Interesting idea, thanks. So far the best I could do is to use opacity: 0.3; and then for span:hover {opacity 1.0} this gives a nice effect but just not black-white to color that I was looking for. –  Dmitri Mar 15 '11 at 14:33
add comment

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).

share|improve this answer
add comment

This question is missing a more current answer.

The answer is yes, now this is possible and it is well supported amongst modern browsers (though ironically not IE10+ without JavaScript). You are looking at the filter CSS property (which does a lot of other cool stuff besides black and white).

A blog post here goes into more details:

http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS

As well as this question here on Stack Exchange which is getting some love and worth a follow by the OP:

http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

And finally, an actual piece of code, shamelessly robbed from the Stack Exchange answer and tested in Chrome and IE9:

.my_image_class
{ 
    filter: grayscale(100%); /* Current draft standard */
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: url(resources.svg#desaturate); /* Gecko */
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
}
share|improve this answer
add comment

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); } 
share|improve this answer
    
CSS is purposely designed to abstract the look and graphical impact of a website to one discrete place, it is absolutely the place for fancy graphical filters and the only place such things should happen –  ColinSharpe Apr 25 at 19:54
add comment

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

share|improve this answer
    
I am looking for non-javascript, only css. Javascript solution would be the last resort. –  Dmitri Mar 15 '11 at 14:14
add comment

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!

share|improve this answer
add comment

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%);}
share|improve this answer
    
"has to work in FF, Chrome, IE" –  Su' Feb 20 '13 at 17:04
    
@Su' It will work in Chrome & Safari. –  Subin Feb 21 '13 at 4:39
    
So it still doesn't fulfill the requirements of the question, then. –  Su' Feb 21 '13 at 6:08
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.