Lichtspuren und Reflexe

Laterne rote Mauer abgehakt Fenster Licht_Beton Lichtsegel Lampen
Laterne
Laterne (12/19)
Mauer
Mauer (12/19)
abgehakt
Abgehakt (12/19)
Fenster
Fenster (12/19)
Licht_Beton
Licht auf Beton (12/19)
Lichtsegel
Licht auf Beton (12/19)
Lampen
gespiegelte Lampen (01/20)

Eine Lightbox nur mit CSS erstellen, ohne JavaScript.

Vorbemerkung

Eine Lightbox stellt etwas dar, das angelegt, aber zunächst einmal nicht sichtbar ist. Die Sichtbarkeit wird erst durch Benutzerverhalten, z. B. durch ein Mausklick hergestellt und wieder entfernt. Die häufigste Art, durch Mausklick eine Veränderung im Browser zu erreichen, geschieht mit Hilfe des a-Tags (Link-Element). So öffnet sich z. B. eine neue Seite oder man gelangt auf derselben Seite zu einem Bereich, der durch einen Anker (id) gekennzeichnet ist. (ex.: <p id="gesuchte_stelle">Text</p>)

Mit Hilfe von CSS ist es möglich, Bereiche unsichtbar und sichtbar zu machen (display: none; / display: block;) und darüber hinaus festzustellen, ob das Ziel des Mausklicks existiert (Pseudoklasse :target).

Folgende Zeile HTML-Code stellt ein Bild dar, das als Link dient, also mit der Maus angeklickt werden kann. Das Ziel ist eine anderes Element auf der Seite mit der ID "bild1", das als Lightbox-Bild sichtbar gemacht werden soll:

<a href="#bild1"><img src="images/Laterne.jpg" alt="Laterne" class="vorschau"></a>

Die nachstehende Zeile stellt das Element dar, mein Ziel (target), das erreicht werden soll durch das Klicken auf den Link. Es hat die ID "bild1" und es ist das in der Lightbox zu zeigende Bild:

<a href="#" class="lightbox" id="bild1"><img src="images/Laterne.jpg" alt="Laterne"></a>

Gestaltung und Herstellung der Funktionalität durch CSS: