A caption that fades in over an image on hover, rather than always taking up visible space below the photo, keeps a gallery grid visually clean while still providing context when a viewer is actively engaging with a specific image.
Upload a sample image and enter a caption, hover over the preview to see the semi-transparent overlay fade in from the bottom, then copy the HTML and CSS needed to build the same effect for your own image gallery.
The technique layers a semi-transparent gradient and caption text absolutely positioned over the image, transitioning from `opacity: 0` to `opacity: 1` on hover, giving a smooth fade rather than an abrupt appearance.
Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.
Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.
This kind of task shows up constantly in everyday writing, coding, design, and admin work, which is exactly why a dedicated, focused tool saves so much back-and-forth.
Frequently asked questions
Does the overlay only appear on hover, or is it always partially visible?
In this version, the overlay is fully hidden until hover, then fades in smoothly — you could adjust the base opacity in the CSS if you want it partially visible by default.
Will this work on touch devices without a hover state?
Touch devices lack a true hover state, so on mobile the overlay typically wouldn't trigger without a tap-based fallback added via JavaScript.