html - 如何在图像悬停时向图像添加文本？

Question

在我的网站上，我创建了一个 div 标签，并将其背景设置为图像，每当悬停图像时，颜色就会变暗。现在，当图像悬停时，我还希望文本水平和垂直居中显示。我尝试添加文字，但文字甚至没有出现在图像上。

这是我的 HTML:

<div id="countries-hitched-div">
    <h1> Places Hitched </h1>    
    <div id="first" class="image">
        <h1 id="first-text"> India </h1>
        <div class="overlay"></div>
    </div>
</div>

这是我的 CSS:

#first {
    background: url('Images/Home Page/first-quote-image-final.jpg');
    position: relative;
}

.image {
    width: 500px;
    height: 500px;
    position:relative;
}

.image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
}

#first-text {
    position: absolute;
    color: black   
}

Answer 1

在 #first-text 中进行更改:

.image:hover #first-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 50px;
    text-align: center;
}

您将在相对元素内获得居中(垂直和水平)的绝对元素。