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.

Tipps

Bild vergrößern mit dem „Checkbox Hack”

CSS-Formen Generator