1) Demo
Wenn Sie auf die unten befindlichen Bilder klicken, zoomen diese heraus und Sie können auf diese Weise kleinste Details der Aufnahmen wahrnehmen. Im Folgenden wird erläutert, wie dieser Zoom-Effekt zustandekommt.
2) Code
CSS:
Das Element „grid“ erzeugt ein Layout mit zwei Spalten. Die Bilder, denen eine Breite von max. 100% zugewiesen wird, befinden sich in Containern, die mit „figure“ definiert werden.
.grid {
column-count: 2;
column-gap: 1rem;
}
figure {
display: inline-block;
margin: 0 0 0 0;
width: 100%;
}
img {
max-width: 100%;
}
HTML und Javascript:
Per HTML-Code werden vier Bilder in vier figure-container eingefügt. Die Bilder erhalten das Attribut „data-action=“zoom“. Das nachfolgende Javascript ermöglicht, dass alle Bilder, die dieses Attribut aufweisen, herausgezoomt werden können.
<div class="grid">
<figure><img src="img/p1.jpg" data-action="zoom" alt="Blatt" /></figure>
<figure><img src="img/p2.jpg" data-action="zoom" alt="Blatt" /></figure>
<figure><img src="img/p3.jpg" data-action="zoom" alt="Blume" /></figure>
<figure><img src="img/p4.jpg" data-action="zoom" alt="Blatt" /></figure>
</div>
<script src="js/zooming.js"></script>
3) Demo-Dateien zum Download:
Hier können Sie die oben erläuterten Codes sowie die verwendeten Bilder downloaden.
Credits: Codepen