Webdesign - Bilder werden mit dem Fade-Effekt sanft überblendet

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Der Peitlerkofel in Südtirol in Farbe Der Peitlerkofel in Südtirol in s/w

Photo © Monika & Klaus Franz

Bilder werden mit einem Fade-Effekt sanft überblendet

27Apr2014

Sanfte Überblendung von zwei Bildern mit dem Fade-Effekt.


Den sanften Wechsel zwischen zwei Bildern kann man sehr einfach mit der Eigenschaft ":hover" erreichen, während der Anwender mit dem Mauszeiger über ein Bild fährt.
Den Fade-Effekt sehen Sie übrigens ganz oben am Anfang der Seite.

Wie geht das?

Als erstes erkläre ich einen einfachen Bildwechsel ohne sanftes Einblenden. Unten können Sie so einen Bildwechsel testen, in dem Sie den Mauszeiger über das Bild führen.

Peitlerkofel

Um nicht mit Java-Scripts (objektorientierte Programmiersprache) und Mouseover-Effekten zu arbeiten, habe ich diesen Effekt mit CSS (Cascading Style Sheet)-Mitteln und der dynamischen Pseudo-Klasse ":hover" realisiert. Und damit nicht ein zweites Bild geladen werden muss, und es damit zu Wartezeiten beim Bildwechsel kommt, gehe ich folgendermaßen vor.
Anstelle von zwei Bildern (eins in "Farbe" und eins in "schwarz/weiß") habe ich die Bilder zusammengefügt. Unterhalb des "schwarz/weiß-Bildes" habe ich das "farbige Bild" eingebunden und erhalte somit nur ein Bild.
In dem Moment wo nun der Mauszeiger das "schwarz/weiß-Bild" berührt, verschiebe ich das Bild exakt um die Hälfte nach oben und das "farbige Bild" erscheint. Das ist schon alles.

.peitler {
    background: url(reisen_suedtirol201011_zus.jpg) no-repeat 0 0;
    color: transparent;
    height: 28.438em;
    width: 41.25em;
    margin: 1em auto;
}

.peitler:hover {
    background-position: 0 -455px;
}

Das Bild selber wird mit einem div-Container in die Seite eingebunden.

<div class="peitler" title="Der Peitlerkofel">
    Peitlerkofel
</div>

Nun komme ich zu dem schönen Effekt des langsamen Einblendens eines Farbbildes.

Hierfür benötige ich nun aber die beiden Einzelbilder. Also ein Bild in "Farbe" und das andere in "schwarz/weiß" und lege diese Bilder mit CSS (Cascading Style Sheet)-Mitteln, wie bei einem Stapel, übereinander. Das "farbige Bild" liegt dabei als unterstes und das "schwarz/weiß-Bild" darüber.
Zuerst platziert man im HTML (HyperText Markup Language) die beiden Bilder hintereinander in einem separaten "div-Container" mit dem Namen "fade":

<div id="fade">
    <img src="reisen_suedtirol201010.jpg" width="800" height="551"
      alt="Der Peitlerkofel in Südtirol in Farbe">
    <img src="reisen_suedtirol201011.jpg" width="800" height="551"
      alt="Der Peitlerkofel in Südtirol in s/w">
</div>

Dadurch dass die Bilder im CSS (Cascading Style Sheet) absolut ausgerichtet werden, wird das zweite Bild, also der Peitlerkofel in schwarz/weiß, angezeigt. Der "div-Container" wird durch Angabe der Höhe und der Breite auf der Seite platziert, und die zeitliche Überblendungsdauer setze ich auf 3 Sekunden. Auf der Seite CSS-Optimierungen habe ich die verschiedenen Möglichkeiten für die zeitlichen Funktionen bei der Transition oder Animation einmal dargestellt.

#fade {
    position: relative;
    height: 28.438em;
    width: 41.25em;
    margin: 1em auto -2.2em;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
}

#fade img {
    position: absolute;
    transition: 3s ease-in-out;
}

Das schwarz/weiß Bild spreche ich mit der Pseudo-Klasse "nth-of-type (2)" an und blende es beim Überfahren mit dem Mauszeiger durch den Befehl "opacity: 0" langsam aus.
Durch das Verwenden der Pseudo-Klasse "nth-of-type", mit der ich das n-te Element des selben Typ in dem "#fade img" anspreche, spare ich mir die zusätzliche Angabe einer "class" im HTML (HyperText Markup Language) bei dem schwarz/weiß-Bild und das HTML (HyperText Markup Language) bleibt dadurch übersichtlicher und schlanker.

#fade:hover img:nth-of-type(2) {
    opacity: 0;
}

Das war's auch schon!

Der Peitlerkofel in Südtirol in Farbe Der Peitlerkofel in Südtirol in s/w



Leider noch nicht ganz, der Internet Explorer kleiner Version 9 spielt nicht ganz mit!

Diese Versionen verstehen weder die Eigenschaft "opacity", als auch die Pseudo-Klasse "nth-of-type" nicht. Aber hier helfen mir wieder die Conditional Comments und eine separate Anweisung im CSS (Cascading Style Sheet).

#fade:hover > img:first-child + img {
    display: none;
}

Das Bild wird zwar nicht langsam überblendet aber der ":hover"-Effekt bringt zumindest das farbige Bild in den Vordergrund!


Allgemein gilt hier als Ausweg für die Pseudo-Klasse "nth-of-type":

/* Ersatz für li:nth-child(1) */
.classname > li:first-child {
    ...// CSS Code
}

/* Ersatz für li:nth-child(2) */
.classname > li:first-child + li {
    ...// CSS Code
}

/* Ersatz für li:nth-child(3) */
.classname > li:first-child + li + li {
    ...// CSS Code
}

/* Ersatz für li:nth-child(4) */
.classname > li:first-child + li + li + li {
    ...// CSS Code
}

Aber jetzt habe ich mir noch etwas Besonderes ausgedacht. Das schwarz/weiß Bild soll zwei nach oben genickte Bildecken erhalten.
Diesen und noch andere dreidimensionale Effekte habe ich im Artikel Gewölbter oder gebogener Schlagschatten beschrieben.

Zum Seitenanfang springen Λ