HTML - How to Show Text above Image on Hover

If you are good at Photoshop then you can directly show text above an image by customizing an image like that.

But what when you have to display text when the mouse moves over the image.

This kind of functionality is basically seen in the news, product-based websites, or in blogs, they show the post image and title but when the user moves the mouse over one of an image then the short description of the post is visible above the image.

In this quick tutorial, I show how you can show text above Image when the user hovers the image using only HTML and CSS, no jQuery and JavaScript.

Demo Download

HTML
CSS
Demo
Conclusion

1. HTML

First, start with designing HTML layout.

Creating 3 <div class='content_img'> parent elements that hold a <img > and a <div> elements that are using to show Additional text when hovering over the image.

Completed Code

<!-- Image 1 -->
<div class="content_img">
   <img src='image1.jpg' width='100%' height='100%'>
   <div>Image 1 Text</div>
</div>

<!-- Image 2 -->
<div class="content_img">
   <img src='image2.jpg' width='100%' height='100%'>
   <div>Image 2 Text</div>
</div>

<!-- Image 3 -->
<div class="content_img">
   <img src='image3.jpg' width='100%' height='100%'>
   <div>Image 3 Text</div> 
</div>

2. CSS

In order to position the text in over the <div>, you need to assign position: relative to the parent <div> and assign position: absolute to the child <div> element.

Now the container is aligned for locating the child <div> to bottom-right assign bottom: 0 and right: 0. Set visibility: hidden and opacity: 0 for not displaying image first time. Using transition property for adding animation.

When hovering on parent <div> then change the child element visibility: visible and opacity: 0.7; .

Completed Code

/* Parent Container */
.content_img{
    position: relative;
    width: 200px;
    height: 200px;
    float: left;
    margin-right: 10px;
}

/* Child Text Container */
.content_img div{
    position: absolute;
    bottom: 0;
    right: 0;
    background: black;
    color: white;
    margin-bottom: 5px;
    font-family: sans-serif;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: visibility 0s, opacity 0.5s linear; 
    transition: visibility 0s, opacity 0.5s linear;
}

/* Hover on Parent Container */
.content_img:hover{
    cursor: pointer;
}

.content_img:hover div{
    width: 150px;
    padding: 8px 15px;
    visibility: visible;
    opacity: 0.7; 
}

You can change the position of text container using the top bottom left right CSS properties.

Bottom left – bottom: 0 and left: 0
Top right – top: 0 and right: 0
Top left – top: 0 and left: 0
On center – top: 40% and bottom: 40%. Here, you can adjust the percentage according to your requirements.

3. Demo

View Demo

4. Conclusion

This is a good way to show some additional information about the image which you don’t want to let the user know until he/she hover the image.

If you found this tutorial helpful then don't forget to share.

HTML – How to Show Text Above Image on Hover

Contents

1. HTML

2. CSS

3. Demo

4. Conclusion