_content-image-var.scss

Zwei Varianten für _content-image.scss:

1. .figcaption-overlay: <figcaption> wird als Overlay über das Bild gelegt
2. zusätzliche Klasse .on-hover: <figcaption> wird erst bei :hover angezeigt

@use "../abstracts/" as *;

.content-image {
  &.figcaption-overlay {
    figure {
      position: relative;
      figcaption {
        position: absolute;
        width: 100%;
        inset: 0;
        top: inherit;
        padding: 1rem;
        background: linear-gradient(
          hsl(0 0% 13% / 0),
          hsl(0 0% 13% / 0.05),
          hsl(0 0% 13% / 0.1),
          hsl(0 0% 13% / 0.15),
          hsl(0 0% 13% / 0.2),
          hsl(0 0% 13% / 0.25),
          hsl(0 0% 13% / 0.3),
          hsl(0 0% 13% / 0.35),
          hsl(0 0% 13% / 0.4),
          hsl(0 0% 13% / 0.5),
          hsl(0 0% 13% / 0.6),
          hsl(0 0% 13% / 0.7),
        );
        font-family: $font-family-accent;
        font-weight: $font-weight-bold;
        font-style: normal;
        font-size: $font-size-bigger;
        color: $color-neutral-000;
        text-transform: uppercase;
        pointer-events: none;
      }
    }
  }
}

// overlay figcaption on :hover
.content-image {
  &.figcaption-overlay.on-hover {
    figcaption {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.5s ease-in,
                  visibility 0s 0.5s;
    }
    figure:hover {
      figcaption {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.5s ease-in,
                    visibility 0s 0s;
      }
    }
  }
}