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

 

 

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="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

/* (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

 

2B) THE 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

/* (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.

 

 

 

LINKS & REFERENCES

• Figure Caption – MDN
• Simple Tooltip – Code Boxx

 

INFOGRAPHIC CHEAT SHEET