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 Effekte heraus.

Zoom-Funktion mit JavaScript

Bild zoomen, über die Scrollleisten kann dann zum gewünschten Bildausschnitt gescrollt werden.

<style>
div#border {
 width: 450px;
 height: 350px;
 overflow: Scroll;
 border: Inset 4px #AEAEAE;
 margin-top: 5px;
}

div#border img#img {
 max-width: 100%;
 height: Auto;
 object-fit: Cover;
}

input#zoomer {
 width: 390px;
 vertical-align: Middle;
}
</style>

<script>
function zoom(z) {
 document.getElementById("img").style.transform=" scale("+z+", "+z+")";
 document.getElementById("img").style.width=(z*100)+"%";
}
</script>

<div>Zoom: <input type="range" id="zoomer" value="1" min="1" max="10" step="0.1"
 oninput="zoom(this.value)"></div>
<div id="border"><img src="img/m.jpg" id="img"></div>

Tipps

Bild vergrößern mit dem „Checkbox Hack”

CSS-Formen Generator