Text Over Image On Hover In 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.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

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.

 

 

 

EXAMPLE 1) TEXT ON HOVER

1A) THE DEMO

 

1B) THE HTML

<div class="hoverwrap">
  <img src="pie.webp">
  <div class="hovercap">Girl with pie</div>
</div>

The HTML is as simple as it gets.

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

 

1C) THE CSS

/* (A) RESPONSIVE IMAGE */
.hoverwrap img { width: 100%; }
.hoverwrap {
  max-width: 500px; /* optional */
  position: relative; /* required for (b1) */
}
 
/* (B) POSITION CAPTION */
.hovercap {
  /* (B1) PLACE AT BOTTOM */
  position: absolute; bottom: 0; left: 0;
 
  /* (B2) DIMENSIONS + COLORS */
  width: 100%; padding: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

/* (C) ONLY SHOW CAPTION ON HOVER */
.hovercap {
  visibility: none; opacity: 0;
  transition: opacity 0.3s;
}
.hoverwrap:hover .hovercap {
  visibility: visible; opacity: 1;
}

Keep calm and look carefully, this is actually very straightforward.

1. First, we deal with the image.
   • img { width: 100% } will automatically scale the image to fit, use max-width to prevent the image from stretching too much.
   • .hoverwrap { position: relative } is required to properly position the caption.
2. To position the caption.
   • Remember position: relative above? Setting position: absolute; bottom: 0; left: 0; here will place the caption at the bottom-left of the wrapper.
   • Set the caption to width: 100%, and give it some cosmetics.
3. Lastly, we hide the caption and only show it on mouse hover.

P.S. 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) CENTERED OVERLAY ON HOVER

2A) THE DEMO

 

2B) THE HTML

<div class="fullwrap">
  <img src="pie.webp">
  <div class="fullcap">
    <button>This will cover the entire image!</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

/* (A) RESPONSIVE IMAGE */
.fullwrap img { width: 100%; }
.fullwrap {
  max-width: 500px; /* optional */
  position: relative; /* required for (b1) */
}
 
/* (B) POSITION CAPTION */
.fullcap {
  /* (B1) COVER OVER ENTIRE IMAGE */
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
 
  /* (B2) CENTER CONTENT */
  display: flex; justify-content: center; align-items: center;
}
 
/* (C) ONLY SHOW CAPTION ON HOVER */
.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.

• (B1) Instead of positioning the caption at the bottom-left, it is now positioned on the top-left. It is also set to width: 100%; height: 100% to cover the entire image.
• (B2) To center the content, just set display: flex with “center horizontally and vertically”.

 

 

 

LINKS & REFERENCES

• Figure Caption – MDN
• Simple Tooltip – Code Boxx

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET