Bilder mit CSS vergrößern

Hallo, ich komme aus Österreich und bin ein ziemlicher Laie bzw. habe mir mein Wissen Großteils selbst beigebracht. Derzeit habe ich folgendes Problem:

Ich möchte, dass ein Bild auf der Seite beim Überfahren mit der Maus vergrößert wird, ohne dass das Bild unscharf wird.

ich habe mit folgendem html Code das Bild in meiner Seite eingefügt:

<p><img src="../bilder/Hegefischen_2019/Hegefischen_2019_Bild_1.JPG" class="zoom" width="300" height="200"></p>

Hier folgt das CSS mit dem das Bild beim Überfahren mit der Maus vergrößert werden soll:

img.zoom {
transition: transform 0.8s;
-moz-transition: transform 0.8s;
-webkit-transition: transform 0.8s;
-o-transition: transform 0.8s;
-ms-transition: transform 0.8s;
}
img.zoom:hover {
cursor: zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
transform: scale(2.0, 2.0);
-moz-transform: scale(2.0, 2.0);
-webkit-transform: scale(2.0, 2.0);
-o-transform: scale(2.0, 2.0);
-ms-transform: scale(2.0, 2.0);
}

Wenn ich das dann jedoch im Echtbetrieb teste, wird das Bild beim Vergrößern unscharf.. Wie kann ich dies verhindern, bzw. was mache ich falsch oder was fehlt im CSS?

Für ein paar hilfreiche Tipps wäre ich Euch sehr dankbar.

Grüße aus Österreich
Dieter

Hallo,

wie soll ich das verstehen? Ich habe die Datei in den Maßen 300 px x 200px in meinem Bilderordner gespeichert und so in der Seite eingebunden (siehe html Code) beim Skalieren wid sie um den Faktor zwei vergrößert und somit unscharf.

Muss ich die Bilderdatei dann zweimal mit verschiedenen Maßen im Bilderordner abspeichern, oder wie soll ich die Größe des Vorschaublides im Quelltext angeben?

Danke für die Hilfe.

Hallo Jörg, verstehe ich Dich dann richtig wenn ich es so löse:

In meinem Bilderordner speichere ich das Bild zB. mit 300px x 200px. Dann definiere ich mit den html Attributen im Code die Größe des Vorschaubildes mit ZB 150 x 100 und durch das CSS wird das Bild dann auf das doppelte vergrößert und nicht unscharf.

Oder ich speichere das Bild im Bilderordner mit 450px x 300px, setze im html dann width="150" und height="100" wenn ich dann im css in der transform Anweisung auf das dreifache skaliere, dann habe ich ein scharfes Bild.

Das Geheimnis liegt also darin, das Vorschaubild mit width und height zu verkleinern und durch die transform Anweisung auf die ungefährt gespeicherte Größe im Bilderordner zu skalieren. Habe cih Dich da richtig verstanden?

Danke für die Hilfe.

Hallo Jörg,

das funktioniert toll. Vielen Dank.

Tolles Forum, mit echt schneller Hilfe.

LG aus Österreich

Dieter