Bei mouseover auf ein Element ein anderes einblenden

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)

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

.ex1-elternelement {
    width: 100%;
    height: 300px;
    position: relative;
    background: url("Pfad_zum_Foto") center center / cover no-repeat;
}
.ex1-kindelement {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
    background-color: rgba(0,0,0,.7);
    color: #fff;
    text-align: center;
    padding: 20px;
}
.ex1-elternelement:hover .ex1-kindelement {
    opacity: 1;
}

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:

transition: opacity 300ms ease;
-moz-transition: opacity 300ms ease;
-webkit-transition: opacity 300ms ease;
-o-transition: opacity 300ms ease;

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

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

.ex1-kindelement-slideleft {
    position: absolute;
    left: -999px;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,.7);
    color: #fff;
    text-align: center;
    padding: 20px;
    transition: left 300ms ease;
    -moz-transition: left 300ms ease;
    -webkit-transition: left 300ms ease;
    -o-transition: left 300ms ease;
}
.ex1-elternelement:hover .ex1-kindelement-slideleft {
    left: 0;
}

Slide von rechts

.ex1-kindelement-slideright {
    position: absolute;
    right: -999px;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,.7);
    color: #fff;
    text-align: center;
    padding: 20px;
    transition: right 300ms ease;
    -moz-transition: right 300ms ease;
    -webkit-transition: right 300ms ease;
    -o-transition: right 300ms ease;
}
.ex1-elternelement:hover .ex1-kindelement-slideright {
    right: 0;
}

Slide von links mit verzögerter Bewegung des Inhaltes

.ex1-kindelement-slideleftpadding {
    position: absolute;
    left: -999px;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,.7);
    color: #fff;
    text-align: center;
    padding: 20px;
    transition: left 300ms ease, padding 600ms 400ms ease-out;
    -moz-transition: left 300ms ease, padding 600ms 400ms ease-out;
    -webkit-transition: left 300ms ease, padding 600ms 400ms ease-out;
    -o-transition: left 300ms ease, padding 600ms 400ms ease-out;
}
.ex1-elternelement:hover .ex1-kindelement-slideleftpadding {
    left: 0;
    padding-top: 50px;
}

Wie man sieht ist es denkbar einfach, die unterschiedlichsten Übergänge zu erstellen.
Jetzt bist Du an der Reihe, viel Spaß!