对具有背景颜色的父 div 中的 PNG 图像（透明）进行叠加 hover 效果的问题

Question

I believe this is simple but I cannot seem to figure it out. I want to create an overlay hover effect on an image, but I'm having trouble with a PNG image that has the transparency in it. The black background from the parent div element is filling the transparent parts of the PNG image as if the parts of the image are set in opacity: 0 by default.

Here's my html

<div class="parent">
<img src="transparent.png"/>
</div>

Here's my css

.parent {
background-color: #000000;
}
.parent img:hover {
opacity: .7;
}

Answer 1

Here is the solution, not much to say, but the values needs to be changed accordingly, i have just used values to display the function. Read the comments of the codes

 .parent { background-color: #000000; }.parent img:hover { opacity: .1; /*change this accordingly*/ background: rgba(255,255,255,0.5); /*Last value of rgba is opacity, 0.0 -> 1.0*/ }.parent img { background: rgba(255,255,255,1);; }

 <div class="parent"> <img src="https://www.lunapic.com/editor/premade/transparent.gif"/> </div>