How to add text to image when the image is hovered? - html

Question

In my website, I have created a div tag, and I have set its background to a image, and whenever the image is hovered, the color darkens. Now I also want text to appear horizontally and vertically centered when the image is hovered. I tried to add text, but the text does not even appear on the image.
Here is my 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>
Here is my 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

Make the changes in #first-text:
.image:hover #first-text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 50px;
text-align: center;
}
You will get the absolute element centered(Vertical and horizontal) inside relative element.

Answer 2

Add this correction in your code, this aligns your overlay text in center,
#first-text {
text-align:center;
position: absolute;
color: black;
width:100%;
top:45%;
}

Answer 3

First off: Don't set too many new Properties on :hover. If possible, set all properties on page load and only change the necessary properties when :hover'ed or :focus'ed.
Next, you got multiple options to center the h1:
Set a line-height for the h1 and text-align: center (like this example)
Center the h1 with a table (like this)
Use flexbox (like in this tutorial)

Answer 4

For center try text-align center and for hover effects try changing the opacity.
Something like:
#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: .5;
}
#first-text {
position: absolute;
color: black
}
#first-text {
text-align:center;
position: absolute;
color: black;
width:100%;
top:45%;
opacity:0.0
}
#first:hover #first-text{
opacity:1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<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>