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.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes	Text Hover	Overlay Hover
Useful Bits & Links	The End

 

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

 

 

THE DEMO

 

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 –

• Put the caption into a <div class="hovercap">.
• Wrap the image and caption in another wrapper <div class="hoverwrap">.

 

THE CSS

/* (A) WRAPPER */
.hoverwrap {
  position: relative;
  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) BOTTOM */
  position: absolute;
  bottom: 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 only requires position: relative to properly position the caption later. max-width is recommended to prevent the image from stretching too much.
2. width: 100% will automatically scale the image to fit the width of the screen.
3. The caption, the confusing part.
   • C1 should be pretty self-explanatory, the dimensions of the caption box itself.
   • Remember position: relative from earlier? Adding position: absolute; bottom: 0; here will position the caption at the bottom of the wrapper.
   • C3 deals with the colors.
4. Lastly, we hide the caption by default, show it on 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.

 

 

 

THE DEMO

 

THE HTML

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

Yep, this is the same old “layout”. It just has an “expanded caption”.

 

THE CSS

/* (C) CAPTION */
.fullcap {
  /* (C1) DIMENSIONS */
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  /* (C2) POSITION */
  position: absolute;
  top: 0;
  text-align: center;
  padding-top: 30%;
}

Look no further, the CSS is the same with a few minor changes. In particular, we set .fullcap { height: 100% } to create the overlay.

 

 

 

INFOGRAPHIC CHEAT SHEET

 

LINKS & REFERENCES

• Figure Caption – MDN
• Simple Tooltip – Code Boxx