Hovercaption Shortcode#
Display an image with a caption that appears on hover.
Usage#
{{< hovercaption "photo.jpg" "This caption appears on hover" >}}With optional link:
{{< hovercaption src="photo.jpg" caption="Click to learn more" link="/details" >}}Parameters#
| Parameter | Position | Required | Description |
|---|---|---|---|
src | 0 | Yes | Image filename (page resource or path) |
caption | 1 | No | Caption text that appears on hover |
link | - | No | URL to navigate to when clicked |
Features#
- Hover effect: Semi-transparent black overlay with white text fades in on hover
- Optional link: Caption can be clickable
- Smooth transitions: 0.3s fade-in animation
- Lazy loading: Images load only when needed
- Page resources: Works with Hugo page bundle images or absolute paths
Notes#
- Caption only appears when hovering over the image
- If no caption is provided, no overlay appears
- Overlay covers entire image area
- Works well in gallery layouts
- Rounded corners and shadow applied to image container