Image zoom: Border zoomt ungewollt mit

[Karli1969]

Hallo zusammen,

wenn ich ein Bild vergrößert darstellen will, dann kann ich das ja unter anderem mit folgendem CSS machen:

   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(4.0, 4.0) translate(-35px);
             -moz-transform: scale(4.0, 4.0) translate(-35px);
             -webkit-transform: scale(4.0, 4.0) translate(-35px);
             -o-transform: scale(4.0, 4.0) translate(-35px);
             -ms-transform: scale(4.0, 4.0) translate(-35px);
        }

Gehe ich mit der Maus über das Bild, wird das Bild um Faktor 4 vergrößert und etwas nach links geschoben dargestellt.
Das klappt auch wunderbar. Auch ein sehr schöner Effekt, wenn die Transition nicht schlagartig, sondern weich erfolgt.

Mein Problem: Die Bilder haben in Normaldarstellung einen Rahmen von 1px solid.
Das sieht schön aus, aber nach dem Vergrößern wird aus dem filigranen Rahmen ein regelrechter Balkenrahmen. Er wird ebenfalls um Faktor 4 dicker. Kann man das irgendwie hinbekommen, dass der Rahmen seine 1px Dicke behält?

Vielen Dank schon mal
und
viele Grüße
Karl

 

[Karli1969]

Sieht so aus, als ob es nicht gehen würde. Aber so schlimm ist es nun auch wieder nicht. Falls ich eine Lösung finden oder mir selbst ersinnen sollte, werde ich sie hier posten, für den Fall, dass andere das gleiche Problem haben sollten.

 

[mikdoe]

Hast du dir das hier mal angeschaut? Css-element-queries by marcj
Das stellt einen "ResizeSensor" bereit. Vielleicht kannst du damit die border size immer wieder auf den gewünschten Wert setzen. Also quasi ein resize Eventhandler für ein Element.

 

[kkapsner]

Du könntest versuchen, um das <img> ein anderes Element (z.B. ein <span>) zu packen und diesem den Rahmen zu geben. Dann sollte das nicht mitgezoomt werden.