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
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
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.
- The wrapper requires
position: relative
to properly position the caption later.max-width
is also recommended to prevent the image from stretching too much. width: 100%
will automatically scale the image to fit.- Styles for the caption.
- (C1) Pretty self-explanatory, setting the dimensions of the caption box itself.
- (C2) Remember
position: relative
from earlier? Addingposition: absolute; bottom: 0; left: 0;
here will place the caption at the bottom-left of the wrapper. - (C3) Text and background colors.
- 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
anddisplay: block
” – CSS cannot animatedisplay
, thus the roundabout way of usingvisibility
andopacity
.
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.
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
- Figure Caption – MDN
- Simple Tooltip – Code Boxx
INFOGRAPHIC CHEAT SHEET

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!