Beispiel:Bilderzoom-grid.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:SELFHTML-Beispiel-Grundlayout.css" >
<title>Bilderzoom mit Grid Layout</title>
<style>
.gallery {
--size: 10em; /* control the size */
--gap: 1em; /* control the gap */
--zoom: 2; /* control the scale factor */
display: grid;
gap: var(--gap);
width: calc(3*var(--size) + 2*var(--gap));
aspect-ratio: 1;
grid-template-columns: repeat(3,auto);
}
.gallery figure {
margin: 0;
padding: 0;
position: relative;
}
.gallery figcaption {
position: absolute;
bottom: 0;
left: 0;
text-align: center;
width: 100%;
opacity: 0;
color: white;
background: rgb(0 0 0 / 0.3);
}
.gallery figure:hover figcaption,
.gallery figure:focus figcaption {
opacity: 1;
}
.gallery > figure img {
width: 0;
height: 0;
min-height: 100%;
min-width: 100%;
object-fit: cover;
cursor: pointer;
filter: grayscale(80%);
transition: .35s linear;
}
.gallery figure:hover img,
.gallery figure:focus img{
filter: grayscale(0);
width: calc(var(--size)*var(--zoom));
height: calc(var(--size)*var(--zoom));
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
}
</style>
</head>
<body>
<h1>Bilderzoom mit Grid Layout</h1>
<p>Bewegen Sie die Maus über die Bilder oder tabben Sie durch!</p>
<section class="gallery">
<figure tabindex="1">
<img src="https://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>Nürnberger Tor</figcaption>
</figure>
<figure tabindex="1">
<img src="https://wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="Lauf an der Pegnitz - Pegnitz">
<figcaption>Brücke über die Pegnitz</figcaption>
</figure>
<figure tabindex="1">
<img src="https://wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>Mauermühle und Judenturm</figcaption>
</figure>
<figure tabindex="1">
<img src="https://wiki.selfhtml.org/images/e/e7/Lauf-4.jpg" alt="Lauf an der Pegnitz - Rathaus">
<figcaption>Rathaus</figcaption>
</figure>
<figure tabindex="1">
<img src="https://wiki.selfhtml.org/images/4/48/Lauf-7.jpg" alt="Lauf an der Pegnitz - Roter Ochse">
<figcaption>Roter Ochse</figcaption>
</figure>
<figure tabindex="1">
<img src="https://wiki.selfhtml.org/images/1/1a/Lauf-5.jpg" alt="Lauf an der Pegnitz - Wappensaal">
<figcaption>Wappensaal im Wenzelschloss</figcaption>
</figure>
<figure tabindex="1">
<img src="https://wiki.selfhtml.org/images/c/c2/Lauf-6.jpg" alt="Lauf an der Pegnitz - Schleifmühle">
<figcaption>Reichel'sche Schleifmühle</figcaption>
</figure>
<figure tabindex="1">
<img src="https://wiki.selfhtml.org/images/e/e3/Lauf-8.jpg" alt="Lauf an der Pegnitz - Kaiserburg und Pegnitz">
<figcaption>Kaiserburg und Pegnitz</figcaption>
</figure>
<figure tabindex="1">
<img src="https://wiki.selfhtml.org/images/7/79/Lauf-9.jpg" alt="Lauf an der Pegnitz - Penitztalaue">
<figcaption>Pegnitztalauen</figcaption>
</figure>
</section>
</body>
</html>
