Beispiel:Bilder präsentieren-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" >
<title>Bildergalerie mit Lazy loading</title>
<style>
@keyframes reveal {
from {
opacity: 0;
clip-path: inset(45% 20% 45% 20%);
}
to {
opacity: 1;
clip-path: inset(0% 0% 0% 0%);
}
}
.image-reveal {
animation: linear reveal both;
animation-timeline: view();
animation-range: entry 25% cover 50%;
}
/* muss neu gemacht werden! */
figure.hover-caption {
position: relative;
width: clamp(15em, 80%, 40em);
margin: 2em auto;
overflow: hidden;
border-radius: 0.5em;
box-shadow: 0 0 0.5em rgba(0,0,0,0.3);
}
figure.hover-caption img {
display: block;
width: 100%;
height: auto;
vertical-align: middle;
transition: transform 0.4s ease;
}
figure.hover-caption figcaption {
position: absolute;
inset: auto 0 0 0;
padding: 0.75em 1em;
background: rgba(0,0,0,0.6);
color: white;
font-size: 1em;
text-align: center;
transform: translateY(100%);
transition: transform 0.3s ease;
}
</style>
</head>
<body>
<h1>Bildergalerie mit <em>Lazy loading</em></h1>
<section class="gallery">
<figure>
<img src="https://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg"
alt="Historisches Stadttor aus Sandstein mit Turm und roten Dächern, umgeben von alten Häusern"
class="image-reveal"
loading="lazy"
width="600" height="600">
<figcaption>Nürnberger Tor</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/4/4a/Lauf-2.jpg"
alt="gedeckte Holz-Brücke über einen Fluss; Gärten am Flussufer"
class="image-reveal"
loading="lazy"
width="600" height="600">
<figcaption>Brücke über die Pegnitz</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/2/24/Lauf-3.jpg"
alt="leerer Biergarten mit historischen Gebäuden im Hintergrund"
class="image-reveal"
loading="lazy"
width="600" height="600">
<figcaption>Mauermühle und Judenturm</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/e/e7/Lauf-4.jpg"
alt="ein freistehendes Rathaus auf einem fränkischen Marktplatz"
class="image-reveal"
loading="lazy"
width="600" height="600">
<figcaption>Rathaus</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/1/1a/Lauf-5.jpg"
alt="Rittersaal mit roten Sandsteinmauern, Reihe aus böhmischen und fränkischen Wappen"
class="image-reveal"
loading="lazy"
width="600" height="600">
<figcaption>Wappensaal im Wenzelschloss</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/c/c2/Lauf-6.jpg"
alt="Rad einer Wassermühle am Fluss"
class="image-reveal"
loading="lazy"
width="600" height="600">
<figcaption>Reichel'sche Schleifmühle</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/4/48/Lauf-7.jpg"
alt="Lauf an der Pegnitz - Roter Ochse"
class="image-reveal"
loading="lazy"
width="600" height="600">
<figcaption>Roter Ochse</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/e/e3/Lauf-8.jpg"
alt="Lauf an der Pegnitz - Kaiserburg und Pegnitz"
class="image-reveal"
loading="lazy"
width="600" height="600">
<figcaption>Kaiserburg und Pegnitz</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/7/79/Lauf-9.jpg"
alt="Lauf an der Pegnitz - Penitztalaue"
class="image-reveal"
loading="lazy"
width="600" height="600">
<figcaption>Pegnitztalauen</figcaption>
</figure>
</section>
</body>
</html>
