I'm currently facing a challenge with creating a hover effect for a background image while keeping the image in front unchanged.
I would like the background to darken on hover, but I want the image in front of it to remain the same. Essentially, I need the background to change on hover while the overlaying image stays unaffected.
Here's the HTML structure:
<div class="mydiv">
<img class="img" src="Assets/Sources/badge1.png" width="60%" height="60%" >
</div>
<div class="overlay"></div>
CSS styles:
.mydiv {
float: left;
width: 49%;
height: 400px;
margin-right: 1%;
background-image: url(Sources/bg1.jpg);
background-color: black;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.mydiv:hover .overlay {
width: 100%;
height: 100%;
position: relative;
background-color: #000;
opacity: 0.5;
}