In diesem Artikel möchte ich Dir zeigen, wie Du mit Hilfe von CSS bei mouseover auf ein Element ein anderes einblendest. Sinnvoll ist das Ganze zum Beispiel für Fotos, die nach dieser Aktion eine kleine Beschreibung erhalten sollen. Das könnte wie folgt aussehen: (Bitte die Maus über das Bild bewegen)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore

In diesem Beispiel überblende ich mein Foto mit einem schwarzen, leicht transparenten Layer, auf dem sich weisser Text befindet. Die Technik dahinter ist denkbar einfach!

Schritt für Schritt

Zur Technik an sich: Wir haben ein Elternelement (das Foto) und ein Kindelement (der halbtransparente, schwarze Layer). Im Grunde machen wir nichts anderes, als das Kindelement zu verstecken. In meinem Beispiel habe ich diesem eine Deckkraft von 0 gegeben (opacity: 0). Wenn wir nun unsere Maus über das Elternelement bewegen, geben wir dem Kindelement wieder seine volle Deckkraft (opacity: 1). Ja, so einfach und logisch ist das!

Der Code

Relevant sind die markierten Zeilen 4 und 8. Das Elternelement benötigt eine relative Positionierung, das Kindelement eine absolute. Nur so kann es relativ zum Elternelement positioniert werden, sprich: Es richtet sich dort aus.

Den Übergang sanfter machen

Natürlich ist der Übergang noch sehr hart. Möchte man es etwas sanfter, können CSS3 transitions behilflich sein! Wir erweitern unser Kindelement um folgende Codezeilen:

Mit den transitions haben wir dem Element gesagt, dass alle Stilveränderungen mit der Eigenschaft „opacity“ 300 Millisekunden dauern sollen. Somit wird der Übergang weicher und der Effekt schöner

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore

Es geht noch viel mehr!

Natürlich kann man das Kindelement nicht lediglich einfaden lassen! Ich zeige euch hier ein paar Möglichkeiten mit dem dazugehörigen Code.

Slide von links

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore

Slide von rechts

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore

Slide von links mit verzögerter Bewegung des Inhaltes

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore