change z-index of hover background

Question

Is this possible? I've got

<div class="one">
  <a><img src="http://lorempixel.com/100/100"></a>
</div>

I want it so on hover of the div (or <a>) the new hover:background color/image covers the <img>, kind of like the z-index of the hover changes.

So in this fiddle on hover of the <div> or <a> the 100px img wouldn't be visible, everything would be gold.

http://jsfiddle.net/q9Fm3/2/

I'd like to keep the inline <img> element.

Answer 1

A background image can't be on top of an image in the same element, but you can simulate what you want by adding:

.one:hover img {
    display:none;
}

jsFiddle example

Answer 2

Just add this rule:

.one:hover img {display:none;}