Image Captions as Overlays (SCSS)
Places Image block captions on top of the bottom of the photo with a soft dark gradient, a magazine-style look that saves vertical space.
Opens WPIDE on
Code
$overlay-start: rgba(0, 0, 0, 0);
$overlay-end: rgba(0, 0, 0, 0.7);
.entry-content,
.wp-block-post-content {
figure.wp-block-image:has(figcaption) {
position: relative;
img {
display: block;
}
figcaption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 2.5em 1em 0.75em;
background: linear-gradient(to bottom, $overlay-start, $overlay-end);
color: #fff;
font-size: 0.85em;
text-align: left;
a {
color: inherit;
}
}
}
}Notes
Applies to Image blocks with captions inside post content.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.