Fotoalbum

Ein Fotoalbum

HTML-Struktur:

<div class="gallery">
  <figure class="gallery__item">
    <a href="Pfad-zu-Bild/IMG_1.jpg" data-size="1024x683">
      <img src="Pfad-zu-Bild/IMG_1-thumbnail.webp" alt="" width="800" height="534">
    </a>
    <figcaption>Sonnenfinternis</figcaption>
  </figure>
  <figure class="gallery__item">
    <a href="Pfad-zu-Bild/IMG_2.jpg" data-size="1024x683">
      <img src="Pfad-zu-Bild/IMG_2-thumbnail.webp" alt="" width="800" height="534">
    </a>
    <figcaption>Bär</figcaption>
  </figure>
  <figure class="gallery__item">
    <a href="Pfad-zu-Bild/IMG_3.jpg" data-size="512x768">
      <img src="Pfad-zu-Bild/IMG_3-thumbnail.webp" alt="" width="512" height="768">
    </a>
    <figcaption>Bär</figcaption>
  </figure>
  .
  .
  .
<div>

CSS

Erklärung:

• Grid-Layout für responsive Anzeige der Galerie
• auto-fit: So viele Spalten wie möglich
• minmax(10rem, 1fr): Jede Spalte ist mindestens 10rem breit, kann aber größer werden. 
• 1fr: Alle Spalten bekommen gleich viel Platz

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-gap: 0.5rem;
}

.gallery__item {
  overflow: hidden;
  position: relative;
  border: 1px solid #eee;
}

.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease-out, opacity 0.8s ease-in-out, filter 0.8s ease;
}

.gallery__item img:hover {
  transform: scale(1.05);
}

.gallery,
.gallery__item {
  margin: 0;
}

@media (pointer: fine) {
  .gallery__item:has(figcaption) figcaption {
    margin: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    color: #fff;
    font-weight: 500;
    font-size: 1em;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }
  .gallery__item:has(figcaption):hover figcaption {
    background: rgba(0, 0, 0, 0.25);
    opacity: 1;
  }
}

@media (pointer: coarse) {
  .gallery__item:has(figcaption) figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 1em;
    font-size: 1em;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.25);
  }
} /* Styles für JavaScript */  .gallery img {
  opacity: 0;
  filter: blur(2px);
}

.gallery img.loaded {
  opacity: 1;
  filter: blur(0);
}

JavaScript

Kleines Skript für progressive image loading.

<script>
document.addEventListener("DOMContentLoaded", function () {
  const galleryImages = document.querySelectorAll('.gallery__item img');

  galleryImages.forEach(img => {

    if (img.complete) {
      img.classList.add('loaded');
    } else {
      img.addEventListener('load', () => {
        img.classList.add('loaded');
      });
    }
  });
});
</script>