Text Over Image On Hover With HTML CSS (Simple Examples)

Want to show some text or an image caption on mouse hover? Yes, we can do that without a single line of Javascript – Let us walk through a few simple examples in this guide. Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Text Over Image Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

TEXT OVER IMAGE

All right, let us now get into the examples of showing a text caption on image hover.

 

EXAMPLE 1) TEXT ON HOVER

1A) THE DEMO

A Sleeping Cat

 

1B) THE HTML

1-hover-text.html
<div class="hoverwrap">
  <img src="cate.jpg"/>
  <div class="hovercap">A Sleeping Cat</div>
</div>

The HTML is as simple as it gets.

  • Create a <div class="hoverwrap"> wrapper.
  • Sandwich the image <img src="cate.jpg"/> and caption <div class="hovercap"> inside.

 

1C) THE CSS

1-hover-text.css
/* (A) WRAPPER */
.hoverwrap {
  position: relative; /* required for (c2) */
  max-width: 500px;   /* optional */
}

/* (B) RESPONSIVE IMAGE */
.hoverwrap img { width: 100%; }

/* (C) CAPTION */
.hovercap {
  /* (C1) DIMENSIONS */
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
 
  /* (C2) PLACE AT BOTTOM */
  position: absolute;
  bottom: 0; left: 0;
 
  /* (C3) COLORS */
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}

/* (D) SHOW/HIDE */
.hovercap {
  visibility: none; opacity: 0;
  transition: opacity 0.3s;
}
.hoverwrap:hover .hovercap {
  visibility: visible; opacity: 1;
}

This is seemingly confusing at first, but keep calm and let’s walk through it step-by-step.

  1. The wrapper requires position: relative to properly position the caption later. max-width is also recommended to prevent the image from stretching too much.
  2. width: 100% will automatically scale the image to fit.
  3. Styles for the caption.
    • (C1) Pretty self-explanatory, setting the dimensions of the caption box itself.
    • (C2) Remember position: relative from earlier? Adding position: absolute; bottom: 0; left: 0; here will place the caption at the bottom-left of the wrapper.
    • (C3) Text and background colors.
  4. Lastly, we hide the caption by default and show it on mouse hover. For you guys who are thinking “isn’t it easier with display:none and display: block” – CSS cannot animate display, thus the roundabout way of using visibility and opacity.

 

 

EXAMPLE 2) OVERLAY ON HOVER

2A) THE DEMO

This will cover the entire image!

 

2B) THE HTML

2-full-overlay.html
<div class="fullwrap">
  <img src="cate.jpg"/>
  <div class="fullcap">
    This will cover the entire image!<br>
    <button>Click!</button>
  </div>
</div>

Need to show more than just a simple text caption? Of course, we can also add links, buttons, forms, and even other images in the caption overlay.

 

2C) THE CSS

2-full-overlay.css
/* (A) WRAPPER */
.fullwrap {
  position: relative; /* required for (c2) */
  max-width: 500px; /* optional */
}
 
/* (B) RESPONSIVE IMAGE */
.fullwrap img { width: 100%; }
 
/* (C) CAPTION */
.fullcap {
  /* (C1) DIMENSIONS */
  box-sizing: border-box;
  width: 100%;
  height: 100%;
 
  /* (C2) POSITION */
  position: absolute;
  top: 0; left: 0;
  text-align: center;
  padding-top: 30%;
 
   /* (C3) COLORS */
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
}
 
/* (D) SHOW/HIDE */
.fullcap {
  visibility: none; opacity: 0;
  transition: opacity 0.3s;
}
.fullwrap:hover .fullcap {
  visibility: visible; opacity: 1;
}

Look no further, there are only a few minor changes.

  • (C1) The caption overlay is now set to width: 100%; height: 100% to cover the entire image.
  • (C2) Instead of positioning the caption at the bottom-left, it is now positioned on the top-left.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Show Text Over Image On Hover (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.