title: Black and white CSS background on hover
body: <p>I have a CSS sprite like:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;a id="estates" href="http://www.domain.com/estate"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#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;}
  </code></pre>
  
  <p>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?</p>