CSS - Lightbox

Siehe auch: CSS - Modal-Fenster mit HTML5 und CSS3


<style>

/* Ungeöffnete Lightbox */
.lightbox {
  
displaynone;
}

/* Geöffnete lightbox */
.lightbox:target {
  
positionabsolute;
  
left0;
  
top0;
  
width100%;
  
height100%;
  
displayflex;
  
align-itemscenter;
  
justify-contentcenter;
}

/* Lightbox Inhalt */
.lightbox figcaption {
  
width25rem;
  
positionrelative;
  
padding1.5em;
  
background-colorLightgreen;
}

/* Button zum Schließen */
.lightbox .close {
  
positionrelative;
  
displayblock;
}

.
lightbox .close::after {
  
right: -1rem;
  
top: -1rem;
  
width2rem;
  
height2rem;
  
positionabsolute;
  
displayflex;
  
z-index1;
  
align-itemscenter;
  
justify-contentcenter;
  
background-colorblack;
  
border-radius50%;
  
colorwhite;
  
content"×";
  
cursorpointer;
}

/* Lightbox Überlagerung (Overlay) */
.lightbox .close::before {
  
left0;
  
top0;
  
width100%;
  
height100%;
  
positionfixed;
  
background-colorrgba(0,0,0,.7);
  
content"";
  
cursor: default;
}
</
style>

<
ul>
  <
li><a href="#beispiel1">Öffne Beispiel #1</a></li>
  
<li><a href="#beispiel2">Öffne Beispiel #2</a></li>
</ul>

<
div class="lightbox" id="beispiel1">
  <
figure>
    <
a href="#" class="close"></a>
    <
figcaption>Lorem ipsum dolor sit ametconsectetur adipiscing elit.
      
Donec felis enimplacerat id eleifend eusemper vel sem.</figcaption>
  </
figure>
</
div>

<
div class="lightbox" id="beispiel2">
  <
figure>
    <
a href="#" class="close"></a>
    <
figcaption>Cras risus odiopharetra nec ultricies et,
      
mollis ac augueNunc et diam quis sapien dignissim auctor.
      
Quisque quis neque arcunec gravida magna.</figcaption>
  </
figure>
</
div>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<figcaption> Beschriftung

CSS - Wasserzeicheneffekt - Hintergrundbild fixieren

PHP - Mit filter_input Zahlenwerte überprüfen

JavaScript - Formularfelder dynamisch hinzufügen

MySQL - Bilder in einer Datenbank-Tabelle speichern und ausgeben

Klare Rubrikeinteilung
Damit der Benutzer schnell und vor allem einfach an die gewünschten Informationen kommt, müssen die einzelnen Inhalte (Artikel etc.) der Homepage in klar ersichtliche Rubriken eingeteilt werden.