I've come across many plugins that can desaturate an image within the tag.
However, I haven't been able to find a solution for desaturating a background image that is used for an element (div).
Is there a way to desaturate the background image upon hover without the need for two separate backgrounds (such as image sprites, where one is black and white and the other is in color)?
I know it can be done 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 that's not the solution I'm looking for. I want to be able to desaturate the background image dynamically. Please help.