Span bei Hover einblenden

[Waegi]

Hallo zusammen,

Ich weiß solche Themen wurden hier schon öfters angesprochen, aber ich hab alles mögliche versucht, wahrscheinlich ist es nur ein kleiner Fehler den ich selbst nich finden oder worüber ich nicht bescheid weiß.

Und zwar möchte ich auf einer Homepage, wenn man über ein Bild hovert, dass über das Bild ein DIV-Containereingeblendet wird, in dem ein Text steht und dieser DIV-Container hat eine transparente Hintergrundfarbe die das Bild überlagert.

Ich hab es jetzt soweit, dass ich das Bild hab und der DIV-Container von der Position her direkt darüber sitzt, nun hab ich den DIV-Container ausgeblendet und das Bild ist so zu sehen. Nur beim Hovern passiert nichts, bisher hab ich das über folgenden Code probiert:

.team{position:relative;}
.capture{background:rgba(51,53,148,0.8); position:absolute; z-index:150; width:100%; height:100%; text-align:center; vertical-align:middle; color:#fff; visibility:hidden;}
.team img:hover .team .capture{visibility:visible;}

Der HTML Code dazu:

<div class="team">
<span class="capture">Test</span><img src="http://dev.spaeth-haustechnik.de/wp-content/uploads/2015/12/manfred_waegerle.jpg" alt="Manfred Wägerle" />
</div>

Hier noch die Seite, auf der das Problem auftritt: http://dev.spaeth-haustechnik.de/team-2/

Ich hoffe mir kann hier jemand helfen. Das Thema um das Bild ein a-Tag und den span-container durch einen a-Tag ersetzen hat leider nicht funktioniert.

Grüße Dennis

 

[Sargas]

Nimm mal das zweite ".team" beim CSS raus und wende das "hover" auf ein übergeordnetes Element an. Muss bei sowas auch immer bisschen probieren, hab aber grade nochmal bei mir auf der Seite geschaut, da funktioniert es so.

 

[Waegi]

Also das ganze funktioniert ja bei der Navigation, nur bei dem Punkt nicht richtig. Ich hab das jetzt mal so umgebaut, geht aber auch nicht.

.team{position:relative;}
.capture{background:rgba(51,53,148,0.8); position:absolute; z-index:150; width:100%; height:100%; text-align:center; vertical-align:middle; color:#fff; visibility:hidden;}
.imghov:hover .capture{visibility:visible;}

<div class="team">
<span class="capture">Test</span><div class="imghov"><img src="http://dev.spaeth-haustechnik.de/wp-content/uploads/2015/12/manfred_waegerle.jpg" alt="Manfred Wägerle" /></div>
</div>

 

[Sargas]

Sekunde... Ich glaub ich steh grad auf dem Schlauch... Wieso denn jetzt Navigation, in deinem ersten Post geht es doch um ein Bild!? Geht es jetzt um die Navigation bzw. die Unterpunkte der Navigation oder geht es um die Fotos der Mitarbeiter?

 

[Waegi]

Bei der Navigation funktioniert das Prinzip, wenn ich ein Element hover dass ein anderes eingeblendet wird, jedoch nicht bei dem Bild das ich hier nutzen möchte.

 

[Sargas]

Wäre es eine Option anstelle von visibility mit opacity zu arbeiten? Das CSS funktioniert:

.team:hover .capture { opacity:1; }

Hab es eben mal mit den Entwicklertools im Firefox reingeschrieben. Visibility mag er nicht, gibt bestimmt jemanden hier, der uns auch sagen kann warum nicht.

 

[Waegi]

Hab das jetzt mal soweit umgesetzt, aber irgendwie will das nicht, füg ich folgendes ein:

.imghov:hover .capture{opacity:1;}

Erkennen die Firefox Entwicklertools das hover nicht. Mach ich es jedoch so:

.imghov:hover{opacity:1;}

Wird das hover durch die Tools erkannt, die frage ist jetzt nur warum das so ist.

 

[Sargas]

Ob die Tools das anzeigen ist doch egal, so lange der Effekt funktioniert. Die Pseudoklassen musst du im FF aktivieren, das ist ein kleines Icon mit drei Quadraten drin, ganz rechts am Rand unterhalb von "Animationen" bei mir.

Du hast die opacity jetzt aber dem Bild zugewiesen. Ich meinte du setzt dein .capture standardmäßig auf opacity: 0; und .team:hover .capture auf opacity:1;

 

[Waegi]

.capture{background:rgba(51,53,148,0.8); position:absolute; z-index:150; width:100%; height:100%; text-align:center; vertical-align:middle; color:#fff; opacity:0;}
.imghov:hover .capture{opacity:1;}
.imghov:hover img{opacity:0.5;}

So hab ich das jetzt, die opacity beim Bild einfach zum Test für mich ob da etwas passiert oder nicht, jedoch passiert mit dem .capture gar nichts wenn ich drüber gehe.

 

[Sargas]

Also wenn ich jetzt auf die Seite gehe funktionierts einwandfrei

 

[Gelöschtes Mitglied 633957]

Wie wäre es hiermit:

.team {
    width: 250px;
    height: 350px;
    background: url(http://dev.spaeth-haustechnik.de/wp-content/uploads/2015/12/manfred_waegerle.jpg)
    no-repeat; }
.capture {
    width: 220px;
    height: 320px;
    background: #FFFFF;
    opacity: 0; }
.team:hover .capture {
    font-family: Arial, Helvetica New, Helvetica, sans-serif;
    font-size: 1.0em;
    font-weight: 300;
    color: #000000;
    opacity: 0.75;
    text-align: justify;
    padding: 15px; }

<div class="team">
    <div class="capture">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et
    dolore magna aliquyam erat, sed diam voluptua.
    <BR><BR>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et
    accusam et justo duo dolores et ea rebum.
    </div>
</div>

 

[Waegi]

Ja das hab ich gerade auch bemerkt, als ich hier gepostet hatte, wollte es noch nicht. Aber dann mal vielen Dank für deine Hilfe und deine Geduld, dann ist das Problem jetzt gelöst.

 

[Waegi]

@tynick: Danke für deinen Beitrag, hat dann aber so funktioniert und wird jetzt auch so dargestellt, wie ich mir das wünsch, sowohl am PC, wie auch auf dem Tablet.

 

[Gelöschtes Mitglied 633957]

hat dann aber so funktioniert und wird jetzt auch so dargestellt, wie ich mir das wünsch

Habe ich schon mitbekommen...
Ich tippe einfach zu langsam!