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

.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

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
.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

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
.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

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
.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ß!

Smalltalk-Ecke

Hat Dir der Artikel gefallen oder möchtest Du am Inhalt etwas ergänzen? Hast Du weitere Fragen dazu? Lass uns gerne dazu austauschen. Ich freue mich von Dir zu hören! :)


  1. Max222 Epple sagt:

    gut

  2. hps sagt:

    Hollo danielederosa,

    eine Lösung ist erarbeitet.
    http://silberlinie.de/Seiten/multi_element_hover_single_position_appearence.html
    Ein paar Farben sind zum schnelleren Verständnis verwendet.

    Gruß hps

  3. hps sagt:

    Da ist jetzt auf meiner Seite:
    http://silberlinie.de/Seiten/hover_scalen_6.html

    eine weiterere demo versucht, wie die Taster mit den Tafeln arbeiten.

    Was hier noch nicht geht ist:
    – die kindelemente dürfen nicht scalen, sondern nur erscheinen (tun sie aber)
    – bei hover über die kindelemente darf keine Aktion erfolgen (erfolgt aber)

    Ich war der Annahme, dass Deine Seite mit der Beschreibung für diesen Vorgang zutreffen würde, weil es heist: BEI MOUSEOVER AUF EIN ELEMENT EIN ANDERES EINBLENDEN.

    Grüße hp

  4. hps sagt:

    Hallo Daniele,

    kann man nicht hier
    .ex1-elternelement:hover .ex1-kindelement {
    opacity: 1;
    }
    anstatt .ex1-kindelement
    die id des kindelement-div’s
    div id=“board“
    verwenden?

    Gruß hp

  5. hps sagt:

    Gelingt nicht. Hier nochmal ohne die Zeichen.

    div id=“button“ class=“ex1-elternelement“ style=“position: relative;
    top: 100px; left: 100px;“
    img alt=“Button“ src=“image-1″/
    div id=“board“ class=“ex1-kindelement“ style=“position: absolute;
    top: 100px; left: 600px;“
    img alt=“Board“ src=“image-2″/
    /div
    /div

    1. Daniele sagt:

      Gibt es denn eine Live-Vorschau, die ich mir anschauen könnte?

      Viele Grüße,
      Daniele

  6. hps sagt:

    Hallo Daniele,

    Sehr gut. Die beiden Objekte verhalten sich jetzt richtig.

    Was nicht sein soll ist, das beide Objekte im gesamten Bereich auf hover reagieren.

    Das heist, ein hover über das elternelement soll nur das elternelement selbst scalen,
    nicht aber den gesamten Bereich. Und dabei wird das kindelement einblenden.

    Wenn wir uns außerhalb des elternelementes befinden wollen wir keinerlei Aktion auslösen.
    Auch nicht bei hover über das kindelement.

    Du hast hier so etwas wie einen Button den du betätigst. Der reagiert und zeigt eine
    Tafel mit einer Meldung.

    Der code ist hier mit Punkten umgeben, da ich nicht weis wie er sichtbar in deinen
    Kommentarbereich hineinschreiben wird.

    Code:
    ..
    ..
    ..
    ..
    ..
    ..

    Gruß hp

    1. Daniele sagt:

      Gibt es denn eine Live-Vorschau, die ich mir anschauen könnte?

      Viele Grüße,
      Daniele

  7. hps sagt:

    Hallo danielederosa,

    was meinst Du mit dem obigen ersten Bild auf dieser Seite und der Beschreibung:
    „Das könnte wie folgt aussehen: (Bitte die Maus über das Bild bewegen)“

    Da ist die animierte Grafik die bei mouseover erscheint. Ist es das?
    Welche Bedeutung hat Schriftzug des Lorem ipsum?

    Gruß hp

    1. Daniele sagt:

      Hallo nochmal,

      dieser Artikel ist etwas älter, somit gingen ein paar Beispiele leider verloren, die sich jeweils unter den Textbereichen befinden sollten.

      Dein Code sollte eher wie folgt aussehen, um die Transition auch beim Verlassen des Objektes zu erzeugen:


      .ex1-elternelement {
      transition: all 1s ease-in-out, opacity 2s;
      }
      .ex1-kindelement {
      transition: all 1s ease-in-out, opacity 2s;
      opacity: 0;
      }
      .ex1-elternelement:hover {
      transform: scale(1.05);
      }
      .ex1-elternelement:hover .ex1-kindelement {
      opacity: 1;
      }

      Das Problem: Dadurch, dass Du die Eigenschaften untereinander definierst, überschreibt der untere Wert automatisch den oberen.

      Viele Grüße,
      Daniele

  8. hps sagt:

    Bei mouseover auf ein Element ein anderes einblenden

    Hallo Daniele,

    OK. Ein Fehler ist behoben.
    Nun beendet die transformation und die transition nicht sanft sondern abrupt..
    Hier der code soweit

    .ex1-elternelement {
    }
    .ex1-kindelement {
    opacity: 0;
    }
    .ex1-elternelement:hover {
    transform: scale(1.05);
    }
    .ex1-elternelement:hover .ex1-kindelement {
    transition: all 1s ease-in-out;
    transition: opacity 2s;
    opacity: 1;
    }

  9. hps sagt:

    Es sollen wie bei danielederosa’s Beispiel zwei Elemente in Abhängigkeit von mouseover Aktionen zeigen.

    Das Elternelement ist ständig sichtbar. Das Kindelement wird bei mousover über das Elternelement sanft sichtbar. Das Elternelement wird in der Größe sanft gescaled.
    Nach mouseout geht die Sichtbarkeit des Kindelementes sanft auf null zurück. Und die Vergrößerung des Elternelementes geht sanft auf den Faktor 1 zurück .
    Die gesamte mouseover Aktion findet nur dann statt, wenn über das Elternelement gehovert wird.

    Hier ist der code soweit.
    Drei Störungen sind noch zu sehen:
    – die mouseover Aktion wird bei hover über den gesamten Bereich der beiden Elemente ausgelöst (soll aber nur über dem Elternelement erfolgen)
    – das scalen für das Elternelement findet über den gesamten Bereich der beiden Elemente statt (soll aber nur das Elternelement scalen)
    – der Endverlauf von opacity und scale erfolgt abrupt (soll aber sanft erfolgen)
    Was ist zu tun?

    .ex1-kindelement {
    opacity: 0;
    }
    .ex1-elternelement: hover {
    transition: all 1s ease-in-out;
    transform: scale(1.05);
    }
    .ex1-elternelement:hover .ex1-kindelement {
    transition: opacity 2s;
    opacity: 1;
    }

    Gruß hp

    1. Daniele sagt:

      Hallo,

      bitte versuche zunächst, die transition-Eigenschaft direkt auf „.ex1-kindelement“ anzuwenden, statt auf die :hover-Pseudoklasse. Das könnte das Problem bereits beheben.

      Viele Grüße,
      Daniele

  10. kerstin sagt:

    Hallo, ich bin jetzt noch einmal auf das Thema Minimaliste.. gegangen und ich denke, Du erkennst das Problem. Ich würde mich freuen eine Lösung zu finden, einfach weil es auch immer Spaß macht zu lernen. http://kerstinzarbock.de

    1. Daniele sagt:

      Hallo Kerstin,

      verwendest Du ein Script für diesen Slider? Wenn ja, welches? Für mich sieht es eher danach aus, als wäre dieser nicht richtig eingebunden worden. Dadurch werden die Elemente nicht so angeordnet, wie Du sie gerne hättest.

      Viele Grüße,
      Daniele

  11. Kerstin sagt:

    Hallo, ich quäle mich eine weile mit dem Solider und wie nicht was ich falsch mache. leider ist der Abstand unter dem Solider einfach zu groß und ich kann das so niemanden zumuten. Hast Du vielleicht eine Idee ? Im css finde ich auch keine Angaben, notfalls muss ich zu solider inaktiv stellen, aber auch das finde ich irgendwie nicht. Wie gesagt, Hilfe wäre willkommen. Danke, Kerstin

    1. Daniele sagt:

      Hallo Kerstin,

      hast Du vielleicht ein Live-Beispiel da? Dann kann ich Dir zuverlässiger helfen. Ansonsten überprüfe doch mal ob via CSS ein „margin-bottom“ definiert ist, der würde für den Außenabstand nach unten sorgen.

      Ich hoffe ich konnte Dir helfen!

      Viele Grüße,
      Daniele

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Werde Teil unserer Community

Abonniere unseren kostenlosen Newsletter und wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, die Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.
Kostenloser Newsletter

Bleibe auf dem Laufenden!

Wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.