Search code examples
htmlcsspngoverlaytransparency

Issue with making an overlay hover effect to a PNG image (transparent) in a parent div with a background color

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;
}

enter image description here

Solution

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