Bilder Zoom-Funktion mit CSS
Es muss nicht immer JavaScript sein wenn man Bilder mit einer Zoom-Funktion ausstatten möchte, CSS bietet diese Möglichkeit auch, unterstützt wird dies vom Mozilla Firefox, Microsoft Edge und Google Chrome.
Bild mit Zoom-Funktion
Wenn man mit dem Mauszeiger über das Bild fährt wird dieses vergrößert.
CSS-Angabe:
<style>
img.beispiel1 {
transition: transform 0.2s;
}
img.beispiel1:hover {
transform: scale(2.0, 2.0);
}
</style>
<img src="bild.png" class="beispiel1">
Die Anweisung transition: transform leitet die Transformation ein.
Dahinter folgt die Dauer der Transformation 0.2s (in Sekunden).
Mit der Pseudoklasse :hover wird die Transformation ausgeführt.
Die Anweisung scale(2.0, 2.0) gibt den Faktor an um wie viel die
Transformation geändert werden soll.
Die Geschwindigkeit verlangsamen
CSS-Angabe:
<style>
img.beispiel2 {
transition: transform 0.8s;
}
img.beispiel2:hover {
transform: scale(2.0, 2.0);
}
</style>
<img src="bild.png" class="beispiel2">
Das Bild verzerren
CSS-Angabe:
<style>
img.beispiel3 {
transition: transform 0.5s;
}
img.beispiel3:hover {
transform: scale(2.0, 1.0);
}
</style>
<img src="bild.png" class="beispiel3">
Das Bild verkleinern
CSS-Angabe:
<style>
img.beispiel4 {
transition: transform 0.5s;
}
img.beispiel4:hover {
transform: scale(0.5, 0.5);
}
</style>
<img src="bild.png" class="beispiel4">
Experementieren Sie ein wenig mit den Werten, dabei kommen besondere Efekte heraus.