# 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.

- Type: SCSS
- Runs: Site-wide header
- Category: [Media](https://wpide.com/library/category/media/)
- Tags: scss, captions, images
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/image-caption-overlay-scss/

## Code

```scss
$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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Image Captions as Overlays (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/