Ergebnis 1 bis 4 von 4
-
06-12-2017, 22:47 #1
Mitglied
- registriert
- 14-03-2015
- Beiträge
- 27
Image zoom: Border zoomt ungewollt mit
Hallo zusammen,
wenn ich ein Bild vergrößert darstellen will, dann kann ich das ja unter anderem mit folgendem CSS machen:
Code: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
-
07-12-2017, 22:56 #2
Mitglied
- registriert
- 14-03-2015
- Beiträge
- 27
AW: Image zoom: Border zoomt ungewollt mit
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.
-
08-12-2017, 07:42 #3
AW: Image zoom: Border zoomt ungewollt mit
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.Das deutsche Javascript Forum http://forum.jswelt.de
-
15-12-2017, 19:58 #4
AW: Image zoom: Border zoomt ungewollt mit
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.
Ähnliche Themen
-
Fancybox Zoom mit "Inside"-Zoom haut nicht ganz hin, zuckt usw.
Von der_pixler im Forum JavaScriptAntworten: 0Letzter Beitrag: 04-12-2012, 15:24 -
Image Zoom via JS
Von noidea001 im Forum JavaScriptAntworten: 1Letzter Beitrag: 13-04-2010, 02:13 -
Aufklappbare Menüleiste klappt ungewollt zu
Von Alice W. im Forum JavaScriptAntworten: 4Letzter Beitrag: 16-02-2009, 19:32 -
Image Zoom
Von bullettooth im Forum JavaScriptAntworten: 2Letzter Beitrag: 12-05-2006, 14:20 -
Apple: Ungewollt 96% Rabatt auf Alben
Von Freelancer im Forum SmalltalkAntworten: 1Letzter Beitrag: 29-08-2005, 08:10
Lesezeichen