Bear Blog photo gallery (lightweight)

A quick and easy way to add a photo gallery to your Bear blog. Photos display in a grid and get dimmed on hover.

No JavaScript, no dependencies, works on any plan. Each thumbnail links directly to its own full-size image, so clicking one opens it on its own, using the browser's native image view rather than an in-page lightbox.

Preview

Photo gallery grid, thumbnails linking out to full-size images

How to use

Wrap your images in a container using the gallery class. Each image is also wrapped in a link pointing to its own URL, so clicking a thumbnail opens the full-size photo.

Markup

<div class="gallery">

[![Photo](image-url.webp)](image-url.webp)
[![Photo](image-url.webp)](image-url.webp)
[![Photo](image-url.webp)](image-url.webp)

</div>

Styles

.gallery {
  margin-block: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
  gap: 0.6rem;
}

.gallery > p {
  margin: 0;
  display: contents;
}

.gallery a {
  display: block;
}

.gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
}

@media (hover: hover) {
  .gallery a:hover img {
    opacity: 0.7;
  }
}

Want more? Check out the full Bear Blog library.