How to add a text overlay over an image with HTML and CSS

Question

I am trying to make it so that when the cursor is hovered over an image, text will display at the center of the image. Text such as "Facials", "Skin Care Solutions" etc. should display at the center of their corresponding images when the cursor hovers on to it. A overlay effect where the images changes color when be hovered over has been added.

Here is a picture for context.

HTML

<section id="service">
    <div class="title-text">
    <p>SERVICES</p>
    <h1>Personalized Special Care</h1>
    </div>    
    <div class="service-box">
        <div class="single-service">
            <img src="images/facials.PNG">
            <div class="overlay"></div>
            <div class="service-desc">
                <h3>Facials</h3> 
                <hr>  
            </div>
        </div>
        <div class="single-service">
            <img src="images/skin_solutions.PNG"> 
            <div class="overlay"></div>
            <div class="service-desc">
                <h3>Skin Care Solutions</h3> 
                <hr>
            </div> 
        </div>
        <div class="single-service">
            <img src="images/lash.PNG">
            <div class="overlay"></div> 
            <div class="service-desc">
                <h3>Lashes</h3> 
                <hr>
            </div> 
        </div>
        <div class="single-service">
            <img src="images/microblading.PNG">
            <div class="overlay"></div>
            <div class="service-desc">
                <h3>Microblading</h3> 
                <hr> 
            </div> 
        </div>
        <div class="single-service">
            <img src="images/eyebrow_treatment.PNG">
            <div class="overlay"></div>
            <div class="service-desc">
                <h3>Eyebrow Treatment</h3> 
                <hr> 
            </div>  
        </div>
    </div>


</section>

CSS

#service{
    width: 100%;
    padding: 70px 0;
    background: #b4edfa;    
}
.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: 15px;
    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;
}
.service-desc{
    width: 80;
    position: absolute;
    bottom: 0%;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%);
    transition: 1s;
}
.service-desc h3{
    line-height: 20%
}
.service-desc p{
    font-size: 15px;    
}

hr{
    background: #fff;
    height: 2px;
    border: 0;
    margin: 15px auto;
    width: 60%;
}

.singler-service:hover .service-desc{ /*create hovering effect that shows text*/
    bottom: 40%;
    opacity: 1;
}

Has no effect. The color overlay effect still works, but the text overlay does not show. — minTwin, Nov 08 '20 at 07:58

score 1 · Answer 1 · answered Nov 08 '20 at 05:52

1

add this code:

.overlay{
   display: none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

and also:

img{
   width: 100%;
}

answered Nov 08 '20 at 05:52

mohammad

66
8

This causes the color overlay effect to no longer work. – minTwin Nov 08 '20 at 07:46
also you can use display none then block insted, after hover! – mohammad Nov 08 '20 at 08:40

score 0 · Answer 2 · answered Nov 08 '20 at 05:54

0

The class service-desc should be in overlay class so the </div> for overlay should be done like this.

<div class="single-service">
            <img src="images/facials.PNG">
            <div class="overlay">
            <div class="service-desc">
                <h3>Facials</h3></div> 
                <hr>  
            </div>
        </div>

answered Nov 08 '20 at 05:54

Nur Alia Hidayah

1
4

This causes the color overlay effect to no longer work as well. – minTwin Nov 08 '20 at 07:49
Try this one. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade – Nur Alia Hidayah Nov 08 '20 at 12:04

How to add a text overlay over an image with HTML and CSS

2 Answers2