CSS3 transitions - Hintergrundbild zoomen

Mit CSS3 transition lassen sich schöne Effekte realisieren. Ein Beispiel ist das Zommen eines (Hintergrund-)Bilder bei hover / mouse over.

Folgender Aufbau ist notwendig:

<div Größe + overflow:hidden>
         <div Hintergrundbild (cover), transitions> </div>
</div>

Der äußere Container sorgt mit overflow:hidden dafür, dass beim Zoom des inneren Containers die Größe des äußeren Containers gleich bleibt. Der Innere Conainter ändert seine Größe beim Zoomen zwar, über die des äußeren Containers hinausragende Bereiche werden aber nicht angezeigt. So entsteht der wahrgenommen Effekt einer Bildvergrößerung.

Die transitions sind im Grunde auch einfach:

Normalzustand: transition: 8.0s ease-in-out;  transform: scale(1);
Hover: transform: scale(1.3);

Was passiert: bei hover wird insgesamt 8 Sekunden von 100% (1) auf 130% (1.3) vergrößert. Weiter unten folgt ein Beispiel.

Unten sind zwei auf der ersten Blick identische Beispiele des Zoomeffekts. Einfach die Maus über eines der Bilder bewegen und schon sollte das entsprechende Hintergrundbild vergrößert werden.

Beim allseits beliebten Internet Explorer (IE) - mit Version 11 getestet- ist der Effekt beim linken Bild nicht rund, es scheint als ob das Bild ruckelnd vergrößert wird. Beim rechten Bild wird der Effekt normal, was an einem ergänzten rotate bei der transition liegt:

hover: transform: scale(1.3) rotate(0.1deg);

Für das menschliche Auge ist kein Unterschied erkennbar, beim IE sorgt das rotate aber dafür, dass das Bild auch "smooth" herangezoomt wird.

Die W3CSchools listen noch weitere nützliche Parameter auf, vgl. hier.

Durch den Einsatz von transition-delay könnte z.B. der Start der transition (in dem Fall des Zoomings) verzögert werden.