如何使用 HTML 和 CSS 在图像上添加文本覆盖 [重复]

Question

我正在尝试使光标悬停在图像上时，文本将显示在图像的中心。当光标悬停在相应图像上时，诸如“面部护理”、“护肤解决方案”等文本应显示在相应图像的中心。添加了一种叠加效果，当鼠标悬停在上面时图像会改变颜色。

这是一张背景图片。

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;
}

Answer 1

添加此代码：

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

还有：

img{
   width: 100%;
}

Answer 2

service-desc 类应该是 in 覆盖类，所以覆盖层的</div> 应该像这样完成。

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