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.

<sup> Physische Auszeichnung

CSS - Container vertikal drehen

PHP - Bilddatei in unterschiedlich breite "Streifen" zerlegen

JavaScript - Countdown (4)

MySQL - Höchstwert einer Spalte ermitteln

Startseite gleich Schaufenster
Die Startseite ist für Ihre Homepage zugleich Schaufenster, Eingangstür und Visitenkarte. Als Schaufenster bietet sie einen Überblick über das, was auf der Webpräsenz zu finden ist; stellen Sie Fotos aus, verkaufen Sie Software oder präsentieren Sie Ihre Hobbies? Handelt es sich um eine private, geschäftliche, gemeinnützige oder öffentliche Homepage? Dies muss ohne langes Klicken und Suchen klar sein.