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 when the user hovers over the link to change the image color to black and white or perhaps overlay a transparent png if that cannot happen?

Answer 1

You can look into the CSS grayscale filter. It's along the lines of:

#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 */;
}

Just don't forget to add the other hundred things you need for cross browser support

I found the other hundred things and added them.