Hero image

An add-on that turns any image into a wide, desaturated banner that comes alive on hover. A simple way to add a cinematic touch to a post or page.¹

Preview

Example image

How to use

Wrap your image in a container using the hero class.

Markup

<div class="hero">

![Your image](https://example.com/image.jpg)

</div>

Styles

/* Hero image | robertbirming.com */
.hero img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: calc(var(--radius) * 3);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--text) 8%, transparent);
  filter: saturate(0.6) contrast(0.95);
  transition: filter 0.4s ease;
}

@media (hover: hover) {
  .hero img:hover {
    filter: saturate(1) contrast(1);
  }
}

Want more? Check out all available Bearming add-ons.

Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make them work with your setup.↩