I have designed a section on my website where an image darkens upon hovering, and I would like text to appear centered both horizontally and vertically when the image is hovered over. However, despite my efforts, the text does not display on the image as intended.
Below is the HTML code snippet:
<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>
And here is the corresponding CSS styling:
#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
}