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

Eine zufällige Auswahl von „Bausteinen” (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Wasserzeicheneffekt - Hintergrundbild fixieren

PHP - Wochentag ausgeben

JavaScript - Leerzeichen am Anfang und Ende einer Zeichenkette entfernen

MySQL - Datensatz Wert um 5% erhöhen