Currently, I have a container with a background image that turns semi-transparent on hover. Below is the simplified version of my HTML:
<div class="container">
<div class="overlay"></div>
<img src="hi.jpg">
</div>
This is how I achieve the semi-transparent overlay effect:
.container:hover > .overlay {
background-color: black;
height: 100%;
position: absolute;
width: 100%;
opacity: .2
}
The issue arises when hovering over the container; not only does the background image get affected by the black overlay, but the actual image as well. It seems like the image is positioned UNDER the overlay background, causing it to darken slightly. I attempted to fix this by setting the image's z-index to 3, but unfortunately, it still remains darkened.