-1

I am trying to add an overlay effect for each image on a webpage. Basically when the cursor is moved over the image, it will slightly change color. However the desired effect is not occurring. What is the best way to fix this?

Here is a picture of the webpage for context.

enter image description here

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;
}
minTwin
  • 1,181
  • 2
  • 21
  • 35

2 Answers2

1

This will make your images 60% transparent when hovered over.

  img:hover {
    background: linear-gradient(rgba(0,0,0,0.5),#93dced);
    opacity: 60%;
    transition: 1s;}
Yulia
  • 21
  • 3
0

Your code works well, but there is a technical error in the css, in the .overlay class. You skipped it ; after width: 100%, and missed : between height: 100%.

It should be like this:

.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;
}
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25