Bilder vergrößern mit CSS und :hover

  • Hallo,


    ich habe mit folgendem html Code ein 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?


    Danke für Eure Hilfe.


    Grüße aus Österreich

    Dieter

  • Geronimo

    Hat das Thema freigeschaltet