CSS div einblenden bei mouseover über Bild

[DjMG]

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:

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

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

 

[eri]

oder...

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

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

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

 

[Adam Gontier]

Stimmt, dann eher so:

div#box div{
  display:none;
}

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

 

[Ben90]

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

 

[Daaron]

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.

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

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

 

[DjMG]

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]

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.

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

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

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]

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]

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]

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]

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

 

[Daaron]

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]

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