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

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   
}

score 0 · Answer 1 · answered Feb 18 '17 at 08:27

0

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

answered Feb 18 '17 at 08:27

frnt

8,455
2
22
25

Thanks for your answer – Piyush Maheshwari Feb 18 '17 at 10:07
Welcome :-) @PiyushMaheshwari Do accept or up-vote if it worked. – frnt Feb 18 '17 at 10:37

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

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)

edited May 23 '17 at 12:09

Community

1
1

answered Feb 18 '17 at 08:42

TheLexoPlexx

117
13

How to set properties to page load and what is :focus, as I am not a professional in web development? Thanks for the answer – Piyush Maheshwari Feb 18 '17 at 10:02
Look at this example: http://i.imgur.com/hrucKnj.png The properties of "some-property" are set on page load. `:hover` is a pseudo-class which is activated on (in this case) hovering that element. All properties set in there are changed based on the class that the `:hover` is used on. `:focus` is just another pseudo-class just like `:hover` but with a different use. When clicking in a text field for example, the `:focus` is activated. – TheLexoPlexx Feb 18 '17 at 14:38

score 0 · Answer 3 · edited Feb 18 '17 at 09:47

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>

I want the image to be visible even if it is not hovered, the thing I want is that the image should darken when it is hovered. Thanks for the answer — Piyush Maheshwari, Feb 18 '17 at 10:00

score 0 · Accepted Answer · edited Feb 18 '17 at 11:17

0

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.

edited Feb 18 '17 at 11:17

Donald Duck

8,409
22
75
99

answered Feb 18 '17 at 08:59

Ashwin Mothilal

2,462
1
16
21

Thanks for your answer! – Piyush Maheshwari Feb 18 '17 at 10:09

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

4 Answers4