CSS div einblenden bei mouseover über Bild

DjMG · 7. Oktober 2012

Hallo!

Ich habe ein Bild, bei dessen Mouseover ein <div> erscheinen soll (anstelle bzw. "vor" dem Bild). Ein Beispiel wäre: http://themes.pixelwars.org/responsy-wp/portfolio/ (über ein Item fahren mit der Mouse)

Wie ich dem Beispiel entnommen habe, ist die Struktur wie folgt:

HTML:

<div id="box">
  <img ... />
  <div id="maske">UNSICHTBARER TEXT</div>
</div>

Wie bekomme ich es hin, dass das Masken-Div bei mouseover vom Bild erscheint?

Beste Grüße
DjMG

Adam Gontier · 7. Oktober 2012

HTML:

#maske{
  display:none;
}
#maske:hover{
  display:block;
}

eri · 7. Oktober 2012

oder...

Code:

<div style="width: 100%; height: 20px; background-color: green;" onmouseover="document.getElementById('maske').style.display = 'block';" onmouseout="document.getElementById('maske').style.display = 'none';">
   <div id="maske" style="display: none;">UNSICHTBARER TEXT</div>
</div>
</div>

monstergnom · 7. Oktober 2012

HTML:

#maske{
  display:none;
}
#maske:hover{
  display:block;
}

Über ein nicht angezeigtes Element hovern? Wird wohl schlecht gehen denk ich mal.

Adam Gontier · 7. Oktober 2012

Stimmt, dann eher so:

HTML:

div#box div{
  display:none;
}

div#box:hover div{
  display: block;
}

Ben90 · 7. Oktober 2012

Hab hier ein kleines Live-Beispiel mit jQuery erstellt.
http://jsfiddle.net/FjReq/1/
Hoffe es ist verständlich.

Daaron · 7. Oktober 2012

Sag mal, hast du hier ernsthaft mit JS auf so n einfaches Problem geschossen? Effizienz wird bei dir echt groß geschrieben, hm? In Zeiten von CSS3 ist JS nur noch als Fallback für sowas da.

Code:

.mask
{
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    opacity: 0;
    overflow: hidden;
}
.hover:hover +.mask
{
    opacity: 1;
}

HTML:

<div id="box">
        <img class="hover" src="" alt="">Hi</img>
        <div class="mask">UNSICHTBARER TEXT</div>
    </div>

DjMG · 7. Oktober 2012

Daaron, dein Code sieht vielsprechend aus - vor allem möchte ich tatsächlich mit CSS arbeiten.
Doch leider klappt es ned so ganz: Der Text blendet sich ein, das passt.

ABER: Leider nicht "vor" dem Bild (auf dem Bild drauf), sondern eine Zeile darunter einfach.
Was kann ich tun?

Daaron · 7. Oktober 2012

Hm... grad etwas rumgespielt...

Mit "position:absolute" kann man dafür sorgen, dass ein Element in der Reihenfolge ignoriert wird und alles zurecht rutscht.
aber: der hover triggert dann nicht, weil das Element durch ein anderes überlagert wird.

Du wirst nicht drumrum kommen, den :hover auf die umliegende Box zu machen, statt auf das Bild selbst.

HTML:

    <div class="box">
        <p class="hover">Hi</p>
        <div class="mask">UNSICHTBARER TEXT</div>
</div>
<div class="box">
        <p class="hover">Hi 2</p>
        <div class="mask">UNSICHTBARER TEXT 2</div>
    </div>

Code:

.hover
{
    background-color: red;
    z-index: 1;
}
.mask
{
    position: absolute;
    top:0;
    background-color: blue;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    opacity: 0;
    z-index: 2;
    
}
.box
{
    position: relative;
}
.box:hover .mask
{
    opacity: 1;
}

probier mal, das dürfte eher deinen Wünschen entsprechen.

DjMG · 7. Oktober 2012

Das klappt! Danke!

Die HOVERbox klappt nun von der linken oberen Ecke über das div auf.
Gibts da auch noch andere Effekte, so wie in der Art: http://themes.pixelwars.org/responsy-wp/portfolio/
(Erscheinen)

Daaron · 7. Oktober 2012

Viele Möglichkeiten für Übergänge hast du noch nicht. Die komplexeren Animations-Optionen in CSS3 (mit Keyframes) existieren nur auf dem Papier. Du kannst (außer im IE<=9) dich nur auf die Transitions verlassen. Wenn du weißt, wie groß die Bilder sind, kannst du .mask jeweils ne feste Größe geben und somit auch animiert in der Größe ändern oder hübsch verschieben.

DjMG · 8. Oktober 2012

Naja, Keyframes brauchen es gar nicht zu sein, will ja kein halbes Video auf die Beine stellen :-)
Wäre nur interessant, wie die es ausm Beispiellink gelöst haben. Da "fadet" es nämlich einfach ein... das wäre schon cooler, als das "aufklappen" aus der linken oberen Ecke.

P.S.: Mask hat eine fixe Größe

Daaron · 8. Oktober 2012

Im Beispiel isses JS. Damit hast du erstens kein IE-Problem (alle außer dem 10er sind zu blöd für CSS-Animationen) und zweitens mehr mögliche Animationen.

Du kannst aber im Prinzip mit CSS3 Transitions alles möglich anstellen. Du gibst einem Objekt einen Startwert (z.B. für ne Höhe, ne Farbe, ne Transparenz, ne Position...) und löst auf Hover oder sowas eine Änderung dieser Werte aus. Den Rest erledigt die Transition-Deklaration.

DjMG · 8. Oktober 2012

Okay, wieviel Aufwand wäre es, besagtes Snippet auf JS umzubauen (und wie?)?

Daaron · 8. Oktober 2012

Mit dem richtigen Framework (z.B. jQuery oder Mootools): Keine nennenswerte Herausforderung. Ben90 hat oben schon ne Variante gepostet, die aber aufgrund der Verwendung von IDs recht unflexibel ist.

kling1 · 8. Oktober 2012

hier sollte einiges an brauchbaren jquery plugins zu finden sein.. such dir einfach eins aus http://www.jquery4u.com/plugins/30-text-captions-overlay-image-plugins/#.UHKb800xrKM

Suche

CSS div einblenden bei mouseover über Bild

DjMG

Lieutenant

Adam Gontier

Gast

eri

Lieutenant

monstergnom

Ensign

Adam Gontier

Gast

Ben90

Cadet 3rd Year

Daaron

Fleet Admiral

DjMG

Lieutenant

Daaron

Fleet Admiral

DjMG

Lieutenant

Daaron

Fleet Admiral

DjMG

Lieutenant

Daaron

Fleet Admiral

DjMG

Lieutenant

Daaron

Fleet Admiral

kling1

Gast

Ähnliche Themen