Black and white CSS background on hover

Question

I have a CSS sprite like:

HTML

<a id="estates" href="http://www.domain.com/estate"></a> 

CSS

 #estates {background-position: -200px 0px;width: 96px;height: 90px;} #estates {background: url("http://www.domain.com/images/sprite.png") no-repeat scroll 0% 0% transparent;float: left;margin: 22px -2px 30px 33px;} 

I would like the user to hang on the link in order to change the color of the image to black and white, or perhaps to impose a transparent png if this cannot happen?

Answer 1

You can look in a black and white CSS filter. It is line by line:

 #estates:hover { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url(grayscale.svg); /* Firefox 4+ */ filter: gray; /* IE 6-9 */; } 

Remember to add a hundred more things you need to support cross-browser support.

I found a hundred more things and added them.