Question

On the image hover, I want to display a different small image on it with a background and opacity so that the original image is still visible. I want to use the transition to slow the hover effect.
So here’s what I’m trying and not working:

HTML:

<img src="http://i50.tinypic.com/2poy3kl.jpg" class="test" />

CSS:

.test {
   background: red url("http://i50.tinypic.com/10mue4k.png");
   transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;
}

.test:hover {
    opacity: 0.5;   
}

JS Fiddle:
http://jsfiddle.net/AXQW4/2/

Can someone please help me with this?

Answer 1

You’ll need an additional wrapper for this. Exactly the size of the image, and give that the background. Then, when you hover over the image, you hide it and the underlying background is revealed.

Live example

HTML

<div class="background">
    <img src="http://i50.tinypic.com/2poy3kl.jpg">
</div>

CSS

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
}
.background {
    background: url("http://i50.tinypic.com/10mue4k.png");
    display: inline-block;
    font-size: 0;
}
.background img {
    -webkit-transition: all .5s;
}
.background img:hover {
    opacity: 0.5;
}

No need to know the exact dimensions of the image.