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

 

DOWNLOAD & NOTES

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

 

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.

 

 

TEXT ON HOVER

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

 

THE DEMO

A Sleeping Cat

 

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 –

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

 

THE CSS

2-hover-text.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.

 

 

OVERLAY ON HOVER

Need to show more than just a simple caption? Of course, we can add buttons, forms, and even show a full image overlay with some small changes.

 

THE DEMO

This will cover the entire image!

 

THE HTML

3-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>

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

 

THE CSS

4-full-overlay.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.

 

 

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.

 

INFOGRAPHIC CHEAT SHEET

Show Text Over Image On Hover (Click To Enlarge)

 

LINKS & REFERENCES

 

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. Required fields are marked *