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 creating an image like that.

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

This kind of functionality basically seen in news websites or on some blogs they show the post image and title but when the user hover over one of the image then the short description about the post 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.

HTML - How to Show Text above Image on Hover


Contents

  1. HTML
  2. CSS
  3. Demo
  4. Conclusion

1. HTML

First start with designing HTML layout.

Creating 3 <div class='content_img'> parent elements which hold a <img > and a <div> elements  which is 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>

We did Hover effect part using CSS.


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 are aligned for locate 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 requirement.

3. Demo

Move mouse pointer over the image to see the changes.


4. Conclusion

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

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *