I'm currently working on implementing an overlay effect for images on a webpage. The idea is that when the cursor hovers over an image, it will change color slightly. However, I'm facing some issues and the desired effect is not reflecting. How can I troubleshoot this?
Take a look at this screenshot of the webpage for better context.
https://i.sstatic.net/iLb41.png
HTML
<div class="service-box">
<div class="single-service">
<img src="images/facials.PNG">
<div class="overlay"></div>
</div>
<div class="single-service">
<img src="images/skin_solutions.PNG">
<div class="overlay"></div>
</div>
<div class="single-service">
<img src="images/lash.PNG">
<div class="overlay"></div>
</div>
<div class="single-service">
<img src="images/microblading.PNG">
<div class="overlay"></div>
</div>
<div class="single-service">
<img src="images/eyebrow_treatment.PNG">
<div class="overlay"></div>
</div>
</div>
CSS
.service-box{
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: auto;
}
.single-service{
flex-basis: 50%; /*get two services in 1 row*/
text-align: center;
border-radius: 7px;
margin-bottom: 20px;
color: #fff;
position: relative;
}
.single-service img{
width: 85%; /*resize image*/
border-radius: 7px;
}
.overlay{
width: 100%
height 100%;
position: absolute;
top: 0;
border-radius: 7px;
cursor: pointer;
background: linear-gradient(rgba(0,0,0,0.5),#93dced);
opacity: 0;
transition: 1s;
}
.single-service:hover .overlay{
opacity: 1;
}