Responsive Lightbox Tutorial

Egzon Gashi | 05.2025.

Co-Autor(en): Antonia Linder, Lena Victoria Wölk

In diesem Tutorial zeigen wir dir, wie du eine responsive Lightbox nur mit HTML und CSS und erstellst.

1. Setup:

Zeichenkodierung für das Dokument festlegen:

<!DOCTYPE html>
<html lang="en">

HTML Code für den Inhalt:

</head>
<body>
</body>
</html>

Radio-Eingaben zur Auswahl der angezeigten Lightbox:

<input type="radio" name="lightbox" id="img1-toggle">
<input type="radio" name="lightbox" id="img2-toggle">
<input type="radio" name="lightbox" id="img3-toggle">
<input type="radio" name="lightbox" id="close-toggle">

</body>
</html>

2. Lightbox erstellen:

Jetzt schauen wir uns an, wie die HTML-Struktur für unsere Lightbox aussieht und wie die Buttons darin platziert sind. Wir erklären euch Schritt für Schritt, wie das Ganze aufgebaut ist.

<!-- Lightbox 1 -->
<div class="lightbox img1">
  <img src="bilder/cherrys.jpg" alt="Image 1 Large">
  <label class="button exit-btn" for="close-toggle">✖</label>
  <label class="button prev-btn" for="img3-toggle">&larr;</label>
  <label class="button next-btn" for="img2-toggle">&rarr;</label>
</div>

<!-- Lightbox 2 -->
<div class="lightbox img2">
  <img src="bilder/blueberries.jpg" alt="Image 2 Large">
  <label class="button exit-btn" for="close-toggle">✖</label>
  <label class="button prev-btn" for="img1-toggle">&larr;</label>
  <label class="button next-btn" for="img3-toggle">&rarr;</label>
</div>

<!-- Lightbox 3 -->
<div class="lightbox img3">
  <img src="bilder/raspberries.jpg" alt="Image 3 Large">
  <label class="button exit-btn" for="close-toggle">✖</label>
  <label class="button prev-btn" for="img2-toggle">&larr;</label>
  <label class="button next-btn" for="img1-toggle">&rarr;</label>
</div>

<!-- Containergalerie zur Erfassung aller Vorschaubilder -->
<div class="gallery">
  <label class="gallery-item" for="img1-toggle">
    <img src="bilder/cherrys.jpg" alt="Image 1">
  </label>
  <label class="gallery-item" for="img2-toggle">
    <img src="bilder/blueberries.jpg" alt="Image 2">
  </label>
  <label class="gallery-item" for="img3-toggle">
    <img src="bilder/raspberries.jpg" alt="Image 3">
  </label>
</div>

<div class="lightbox img1">

Hier beginnen wir mit einem div-Container für unsere erste Lightbox. Die Klasse lightbox sorgt für die Zuordnung zu unserer CSS-Lightbox und img1 dient der individuellen Kennzeichnung.

<img src="bilder/cherrys.jpg" alt="Image 1 Large">

Dieses Bild wird in der Lightbox angezeigt. Der src-Pfad verweist auf das Bild und das alt-Attribut ist wichtig für Barrierefreiheit und SEO.

<label class="button exit-btn" for="close-toggle">×</label>

Das hier ist der Exit-Button für die Lightbox. Das label-Element dient hier als Button, der mit dem for-Attribut ein verstecktes Eingabeelement wie ein Checkbox-Toggle anspricht. Beim Klick darauf wird die Lightbox geschlossen.

<label class="button prev-btn" for="img3-toggle">←</label>

<label class="button next-btn" for="img2-toggle">→</label>

Diese beiden Buttons navigieren zur vorherigen oder nächsten Lightbox. Wieder über ein label-Element, das ein for-Attribut hat, das jeweils die Toggle-ID der Ziel-Lightbox anspricht. Die Pfeile (← für links und → für rechts) dienen als Symbole.

Das Gleiche wird für Lightbox 2 und Lightbox 3 gemacht, nur mit jeweils anderem Bild und anderen Ziel-IDs für die Vor- und Zurück-Buttons.

<div class="gallery">

Am Ende kommt ein Container für die Bildvorschau-Galerie. Hier werden alle kleinen Vorschaubilder eingefügt.

<label class="gallery-item" for="img1-toggle">

<img src="bilder/cherrys.jpg" alt="Image 1">

</label>

Jedes Vorschaubild ist wieder in ein label-Element verpackt. Beim Klick auf dieses label wird die dazugehörige Lightbox über das for-Attribut aktiviert.

3. Grundsettings für das Design:

Nun legen wir einige grundlegende Einstellungen für unsere Seite fest. Dazu gehören Zeichensatz, responsives Verhalten und das Basis-Design.

<head>
    <meta charset="UTF-8" /> <!-- Zeichencodierung: UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Lightbox</title>
    <style>
           {margin: 2px;
            font-family: Arial, Helvetica, sans-serif; /* Schriftfamilie */
            background: #f2f2f2;}
    </style>
</head>

<meta charset="UTF-8" />

Mit dieser Zeile legen wir fest, dass alle Sonderzeichen und Umlaute korrekt dargestellt werden können.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Damit sorgen wir dafür, dass unsere Seite auf allen Geräten, egal ob Smartphone, Tablet oder Desktop, korrekt angezeigt wird. Die Breite passt sich an das jeweilige Gerät an

<title>Responsive Lightbox</title>

Hier vergeben wir einen Titel für unsere Seite, der später oben im Browser-Tab angezeigt wird.

<style>

body

{margin: 2px;

font-family: Arial, Helvetica, sans-serif;

background: #f2f2f2;}

</style>

Jetzt definieren wir ein paar CSS-Eigenschaften für den <body>-Bereich der Seite:

margin: 2px
Wir geben der Seite einen kleinen äußeren Rand von 2 Pixeln.
font-family
Damit legen wir fest, dass auf der ganzen Seite die gleiche, von uns ausgewählte, Schriftart genutzt wird.
background
Hier bestimmen wir die Hintergrundfarbe der gesamten Seite. In diesem Fall ein helles Grau mit dem Farbcode #f2f2f2

4. Grundsettings für die Gallerie:

Jetzt kümmern wir uns um die grundlegenden Einstellungen für die Galerie-Elemente. Damit bestimmen wir das Aussehen der Vorschaubilder, wie sie sich beim Darüberfahren verhalten und wie die Lightbox-Bilder gesteuert werden.

.gallery-item 
   {flex: 0 0 auto;
    width: 500px;
    height: 500px;
    margin-right: 2px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    background-color: #ddd;}

.gallery-item:hover 
   {transform: scale(1.02); /* Bild wird leicht vergrößert */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.5s;}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild wird skaliert, um die Fläche zu füllen, ohne die Proportionen zu 
   verlieren}

input[type="radio"] 
   {display: none;}

Jeder Galerie-Container .gallery-item bekommt eine feste Größe (500x500px). Der overflow: hidden sorgt dafür, dass nichts über den Rand hinausragt. Mit cursor: pointer ändert sich der Mauszeiger beim Darüberfahren zu einem Zeigefinger. Die transition ermöglicht einen weichen Effekt bei Veränderungen wie beim hover.

.gallery-item:hover

{transform: scale(1.02);

box-shadow: 2px 0px 5px rgba(0, 0, 0, .5);

transition: box-shadow 0.5s;}

Wenn man mit der Maus über ein Bild fährt, wird es minimal vergrößert scale(1.02) und bekommt einen Schatten box-shadow.

.gallery-item img

{width: 100%;

height: 100%;

object-fit: cover;

display: block;}

Die Bilder füllen den kompletten Container aus, behalten dabei ihr Seitenverhältnis nicht bei object-fit: cover, sondern decken die vorgegebene Fläche vollständig ab. Mit display: block wird verhindert, dass sie unerwünschte Abstände durch Zeilenumbrüche einnehmen.

input[type="radio"]

{display: none;}

Hier werden die Radio-Buttons, die wir für das Umschalten der Lightbox-Bilder verwenden, ausgeblendet. So bleiben sie funktional, sind aber für den Benutzer unsichtbar.

5. Settings für die Lightbox:

Hier kümmern wir uns um den Lightbox-Overlay. Dieses Overlay wird angezeigt, wenn ein Bild in der Galerie angeklickt wird. Es legt sich über die ganze Seite, verdunkelt den Hintergrund und zeigt das große Bild in der Mitte.

.lightbox 
   {position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    flex-direction: column;}

#imgl-toggle:checked ~ .lightbox.imgl,
#img2-toggle:checked ~ .lightbox.img2,
#img3-toggle:checked ~ .lightbox.img3 {
    display: flex; /* Flexbox wird aktiviert, Layout wird angezeigt */}


.lightbox img 
   {max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);}

Die .lightbox nimmt mit position: fixed den kompletten Bildschirm ein. Sie bekommt eine halbtransparente schwarze Hintergrundfarbe (rgba(0,0,0,0.8)), wird aber standardmäßig ausgeblendet display: none. Über align-items und justify-content wird das Bild zentriert, und z-index: 999 stellt sicher, dass es über allen anderen Elementen liegt.

#img1-toggle:checked ~ .lightbox.img1,

#img2-toggle:checked ~ .lightbox.img2,

#img3-toggle:checked ~ .lightbox.img3

{display: flex;}

Wenn der jeweilige Radio-Button #img1-toggle etc. aktiviert ist :checked, wird die zugehörige Lightbox .lightbox.img1 etc. eingeblendet (display: flex).“

.lightbox img

{max-width: 90vw;

max-height: 90vh;

object-fit: contain;

box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);}

Das Bild innerhalb der Lightbox darf maximal 90% der Viewport-Breite und -Höhe einnehmen. Mit object-fit: contain wird es so skaliert, dass es vollständig ins Fenster passt, ohne zugeschnitten zu werden.

6. Settings für die Buttons:

Nun erstellen wir die benötigten Buttons.

.exit-btn 
   {top: 10px;
    right: 10px;}

/* Zurück-Button links */
.prev-btn {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);}

/* Weiter-Button rechts */
.next-btn {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);}

Exit-Button oben rechts exit-btn

.exit-btn { top: 10px; right: 10px; }

top: 10px; Der Button wird 10 Pixel vom oberen Rand des übergeordneten Elements entfernt platziert.

right: 10px; Der Button wird 10 Pixel vom rechten Rand des übergeordneten Elements entfernt platziert. Dadurch wird der Button oben rechts positioniert.

Zurück-Button links .prev-btn

.prev-btn { left: 10px; top: 50%; transform: translateY(-50%);}

left: 10px; Der Button wird 10 Pixel vom linken Rand des übergeordneten Elements entfernt platziert.

top: 50%; Der Button wird auf der vertikalen Mitte des übergeordneten Elements positioniert.

transform: translateY(-50%); Diese Eigenschaft verschiebt den Button um die Hälfte seiner eigenen Höhe nach oben.

Weiter-Button rechts .next-btn

.next-btn { right: 10px; top: 50%; transform: translateY(-50%); }

right: 10px; Der Button wird 10 Pixel vom rechten Rand des übergeordneten Elements entfernt platziert.

top: 50%; Der Button wird ebenfalls auf der vertikalen Mitte des übergeordneten Elements positioniert.

transform: translateY(-50%); Hier wird der Button um die Hälfte seiner eigenen Höhe nach oben verschoben.

7. Buttonverhalten:

Hier legen wir das Verhalten der jeweiligen Buttons fest.

.lightbox label.button 
{position: absolute;
background: rgba (240, 240, 240, 0.7);
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
z-index: 1000;
color: black ;
font-weight: bold ;
border-radius: 18px;
box-shadow: 0 0 20px rgba (0, 0, 0, 0.5);
text-align: center;}

position: absolute;
Das Element wird relativ zu seinem nächsten positionierten Vorfahren (also einem Element mit position: relative; oder position: absolute; oder position: fixed;) positioniert.

padding: 10px 20px;
Es wird ein Innenabstand (Padding) von 10 Pixeln oben und unten sowie 20 Pixeln links und rechts hinzugefügt.

z-index: 1000;
Der z-index bestimmt die Stapelreihenfolge von Elementen. Ein höherer Wert bedeutet, dass dieses Element vor anderen Elementen angezeigt wird. In diesem Fall hat der Button einen sehr hohen z-index, damit er über anderen Elementen liegt, die niedrigere z-index-Werte haben.

Am Ende sollte die fertige responsive Lightbox so aussehen:

Extra: Masonry Layout

Hier erstellen wir als zusätzliche Option eine responsive Lightbox als masonry layout:

.gallery 
 {column-count: 3;
  column-gap: 16px;
  padding: 16px;
  max-width: 1200px;
  margin: auto;
  list-style: none;}

.gallery li 
 {break-inside: avoid;
  margin-bottom: 16px;}

.gallery-item {
  display: block;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background-color: #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  transition: transform 0.2s, box-shadow 0.25s;}

.gallery-item:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

column-count: 3: Die Galerie wird in 3 Spalten aufgeteilt (Masonry-Style, wie Pinterest).

column-gap: 16px: Abstand zwischen den Spalten. padding: 16px: Abstand innen zum Rand der Galerie.

max-width: 1200px: Galerie wird maximal 1200px breit. margin: auto: Zentriert die Galerie horizontal.

list-style: none: Entfernt die Standard-Aufzählungspunkte der <ul>

break-inside: avoid: Verhindert, dass ein Listenelement (Bild) bei einem Spaltenumbruch auseinandergerissen wird.

overflow: hidden: Alles, was über die Grenzen hinausgeht, wird abgeschnitten.

cursor: pointer: Zeigt beim Überfahren mit der Maus einen Zeiger.

transition: Sanfte Animation bei Veränderung von transform und box-shadow.

‹ul class="gallery"›
‹li›
‹label class="gallery-item" for="img1-toggle"› <img src="bilder/grey_cat.jpg" alt="Image 1"›
‹/label >
‹/li>
‹li›
‹label class="gallery-item" for="img2-toggle"›
‹img src="bilder/sleepy_cat.jpg" alt="Image 2"›
‹/ label>
‹/li›
‹li>
‹label class="gallery-item" for="img3-toggle"› <img src="bilder/tiger_cat.jpg" alt="Image 3"›
‹/ label>
‹/li›
‹! -- Add more images as needed --›
</ul>

Jeder <li> enthält ein <label> mit der CSS-Klasse „gallery-item“.

In jedem <label> steckt ein <img>, also ein Bild.

Das for-Attribut im <label> verweist auf eine (nicht im Code enthaltene) Checkbox mit der jeweiligen id (zum Beispiel img1-toggle).
Dadurch wird das Label anklickbar und könnte beispielsweise eine Checkbox „toggeln“, um etwa ein größeres Bild anzuzeigen, ein Modal zu öffnen, oder eine CSS-Klasse zu ändern

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Responsive columns */
@media (max-width: 900px) {
  .gallery {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  .gallery {
    column-count: 1;
  }
}

object-fit: cover: Schneidet das Bild zu, sodass es das Container-Fenster komplett ausfüllt und dabei das Seitenverhältnis beibehält.

max-width: 900px: wenn der Viewport kleiner oder gleich 900px ist, nur noch 2 Spalten.

max-width: 600px: wenn der Viewport kleiner oder gleich 600px ist, nur noch 1 Spalte.

Und so sieht das Endergebnis aus:

Unterschiede zwischen HTML/CSS und JavaScript:

Der größte Unterschied zwischen einer Responsive Lightbox in CSS und JavaScript besteht in derer Funktionsweise, Flexibilität und Komplexität.

Bei einer Responsive Lightbox in CSS werden nur CSS-Techniken wie :target oder Checkbox-Hacks genutzt, ohne das JavaScript benötigt wird.

Vorteile:

Kein zusätzliches JavaScript oder Framework nötig
Reduzierte Ladezeit
Verbesserte Performance
Gut geeignet für einfache Anwendungsfälle, statische Inhalte und einfache Bildpräsentationen

Nachteile:

Eingeschränkte Interaktivität und Funktionalität
Begrenzte Flexibilität bei erweiterten Benutzerinteraktionen
Erschwerter Einsatz von Animationen, Touch-Support und dynamischem Nachladen von Inhalten

Bei einer Responsive Lightbox in JavaScript besteht die Funktionalität darin das JavaScript Klick-Events abfängt und dynamische DOM-Elemente erzeugt.

Vorteile:

Hohe Flexibilität und Erweiterbarkeit (z. B. für Animationen, Preloading, Swipe-Gesten auf Mobilgeräten)
Unterstützung verschiedener Medienformate (Bilder, Videos, HTML-Inhalte etc.)
Einfache Integration komplexer Features (z. B. Bildunterschriften, Navigation)
Responsives Design und Anpassung an unterschiedliche Bildschirmgrößen

Nachteile: