На моем веб-сайте я создал тег 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
}
Спасибо за ваш ответ! –