zen - 11 months ago 71
CSS Question

# Overlay image on hover using only css

I'm trying to overlay an image with a smaller image that has the background opacity of the first image when hover, using only css because i'm not able to edit the html.

Here is a sample HTML:

<div class="image">
<a href="http://www.example.com">
</a>
</div>


Using CSS only, i thought would be something like this:

.image:hover {
background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
}


But it will only replace the image.

Did not have the original image so used an image of my own. See if this helps.

.image:hover {
background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
background-repeat: no-repeat;
opacity: 1;
}
img:hover {
opacity: 0.5;
}
<div class="image">
<a href="http://www.example.com">
<img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" class="rggclImgCenter">
</a>
</div>