Hier möchte ich eine interessante Anwendung für CSS Transitions vorstellen, mit der eine Überblendung zwischen zwei Bildern erreicht wird. Im Beispiel sieht man ein Foto von einem Kraftwerk (Datteln 4).
Wenn man mit der Maus auf das Bild geht, wird es per CSS ausgeblendet und langsam ein anderes Foto eingeblendet. Wenn der Mauszeiger wieder vom Bild genommen wird, blendet sich das andere Bild langsam wieder aus und das erste Bild wird danach wieder angezeigt.
Der Effekt lässt sich zum Beispiel bei Bildergalerien einsetzen. Der HTML-Teil des Beispiels sieht so aus:
<div> <img style="position: absolute;" src="bild1.jpg" alt="" height="333" width="500"> <img src="bild2.jpg" alt="" height="333" width="500"> </div>
Die beiden Bilder werden übereinander gelegt und man sieht nach dem Aufbau der Seite bild2.jpg. Das CSS zum Beispiel
div.fader{margin:1em auto;width:500px}
div.fader img{
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out}
img.swap1,div.fader:hover img.swap2{opacity:1}
div.fader:hover img.swap1,img.swap2{opacity:0}
sorgt dafür, dass das Fading (die Transition) nach der Funktion “ease-in-out” abläuft. Alternativ kann man auch andere Varianten wie “default” oder “cubic-bezier” benutzen, mit denen ein anderer Verlauf des Fadings eingestellt wird.
