Geek Answers Handbook

How to bleach background image of div using css?

I've seen so many plugins to discolor an image using a tag .

But I did not find anything to discolor the background image (An image that is used as the background for an element (div).

Is there a way to discolor the background image when hovering using 2 backgrounds (Ie Image sprites are B & W, and Other is color)

I can do something like this using Image Sprites.

// Initially color Image $(<element>).mouseover(function(e){ jQuery(this).children(":first").stop().animate( { 'background-position': <some coordinates> // Coordinates of b&w Image }, 100 ); e.stopPropagation(); }) .mouseout(function(e){ jQuery(this).children(":first").stop().animate( { 'background-position': <some coordinates> // Coordinates of color Image }, 100, settings.easingType ); e.stopPropagation(); });

But I do not want this. I want to bleach the background image on the fly. Please help.

+6
source share
2 answers
 element: hover{ filter: url(~"data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: gray; }

Here's a related question hoping someone needs to redirect.

CSS to bleach the background image only with other Div Stay Saturated images

0
source

Take a look at this page http://davidwalsh.name/css-filters . It describes some filtering methods (web kit browsers).

Maybe you should do it better with canvas (better browser support) or best on the server itself, for example with php.

+3
source

More articles:


All Articles