This shows how to make an image reveal its caption on hover, choosing from seven different reveal styles.
Four content fields
An Image taken from the media library, a Content Title that becomes the overlay caption, a Link, and a Link Title Attribute. When a link is present the caption panel is wrapped in an anchor, so the visible overlay is the click target rather than a separate button.
Seven overlay styles
- Fade — the panel fades in over the picture.
- Zoom — the reveal scales up.
- Title — a caption bar rather than a full panel.
- Slide Top and Slide Bottom — the panel enters vertically.
- Slide Left and Slide Right — it enters from the side.
Each stored value is turned into a class on the paragraph wrapper, which is the hook to use if you want to restyle one of them in a sub-theme.
One behaviour that is easy to miss
The Title style is handled differently in the template. With the other six, your chosen background colour and opacity are painted onto the overlay panel. Choose Title and that colour and opacity are applied to the caption heading itself instead. If you pick Title and wonder why the tint looks smaller than expected, that is why.
The W3CSS Paragraphs module page lists the image bundles that behave differently again.
Versions, and a related option
This project runs on Drupal 10, 11 and 12 with PHP 8.1 or newer. For a click-to-enlarge gallery driven by a View rather than hand-placed images, Views Lightbox covers that case, and requires Drupal 11.3 or later.
If your project needs a custom bundle or module rather than a stock one, Drupal development services covers it, and recent projects show the range.
