title: background color on <span> when hovering interior text
body: <p>I'm creating some images that when you hover them they display some text on top, so far it all works quite well but the problem I now have is how to keep the background black while hovering the h2.. any help is greatly appreciated</p>
  
  <p>see a demo here <a href="http://jsfiddle.net/buNBm/2/" rel="nofollow">http://jsfiddle.net/buNBm/2/</a></p>
  
  <p>This is what I have</p>
  
  <pre><code>&lt;a href="#"&gt;
    &lt;h2&gt;Some Text&lt;/h2&gt;
    &lt;span&gt;
      &lt;img src="http://www.sheridanrogers.com.au/wp-content/uploads/2011/03/American-pancakes.jpg"/&gt;
    &lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>and css</p>
  
  <pre><code>img {width:250px;}
  
  a:hover h2 {display: block!important;}
  
  a h2 { position: absolute; top:0 ; display: none; color: #fff;}
  
  a span {display: inline-block;}
  
  a:hover span {background: #000}
  
  a span img:hover, a span:hover img {visibility: hidden;}
  </code></pre>