Versuche dieses, so explodiert das Bild von der Mitte aus und verschwindet, wenn man drauf klickt:
HTML
<!DOCTYPE html>
<html>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
position: relative;
}
img.small {
display: block;
width: 200px;
height: auto;
transform: translate(0, 0);
}
figure.ovl {
margin: 0;
position: absolute;
width: 0;
height: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 1s linear;
display: flex;
align-items: center;
justify-content: center;
}
figure.ovl.large {
position: absolute;
width: 80%;
height: 80%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
figure.ovl img {
width: auto;
height: 100%;
}
figure.ovl img.fitVertically {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img class="small" src="images/dia0.jpg">
<img class="small" src="images/dia1.jpg">
<img class="small" src="images/dia2.jpg">
<figure class="ovl">
<img>
</figure>
<script>
const
ovl = document.querySelector('figure.ovl'),
largeImg = ovl.querySelector('img');
// Eventlistener für Klick irgend wo auf der Seite registrieren
window.addEventListener('click', event => {
// Wurde innerhalb eines großes Bildes geklickt?
if (event.target.matches('figure.ovl.large img')) {
// Bild wieder klein machen indem wir die Klasse "large" löschen:
ovl.classList.remove('large');
} else {
// Wurde auf ein kleines Bild geklick?
if (event.target.matches('img.small')) {
// Seitenverhältnisse von Body und Bild ermitteln:
const
boxBody = document.querySelector('body').getBoundingClientRect(),
ratioBody = boxBody.width / boxBody.height,
boxImg = event.target.getBoundingClientRect(),
ratioImg = boxImg.width / boxImg.height;
// Bild entspr. Seitenverhältnis einpassen:
if (ratioImg > ratioBody) {
largeImg.classList.add('fitVertically');
}
// Bild in Overlay eintragen:
largeImg.src = event.target.src;
// Bild groß machen indem wir die Klasse "large" zum Overlay hinzu fügen:
ovl.classList.add('large');
}
}
});
</script>
</body>
</html>
