title: change z-index of hover background
body: <p>Is this possible? I've got</p>
  
  <pre><code>&lt;div class="one"&gt;
    &lt;a&gt;&lt;img src="http://lorempixel.com/100/100"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want it so on hover of the div (or <code>&lt;a&gt;</code>) the new hover:background color/image covers the <code>&lt;img&gt;</code>, kind of like the z-index of the hover changes.</p>
  
  <p>So in this fiddle on hover of the <code>&lt;div&gt;</code> or <code>&lt;a&gt;</code> the 100px img wouldn't be visible, everything would be gold.</p>
  
  <p><a href="http://jsfiddle.net/q9Fm3/2/" rel="nofollow">http://jsfiddle.net/q9Fm3/2/</a></p>
  
  <p>I'd like to keep the inline <code>&lt;img&gt;</code> element. </p>