zen zen - 3 months ago 22
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">
<img src="/uploads/2016/08/img1.png" class="rggclImgCenter">
</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.

Answer

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

You can also refer to this link: https://jsfiddle.net/askptx0y/

.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>