Frage Gleichzeitig 2 Image Hover Effekte

[Allkind92]

Hallo,

ich arbeite momentan an einem auf MixItUp basierender Gallerie Seite, wobei jedes Bild einen externalen Link hat, welcher auch immer anklickbar sein sollte, es sei den die Mausbewegung geht über den 2. Hover Effekt. Wobei hier aber auch Effekt 1 erhalten bleiben sollte.

Nun sollte es also 2 Hover Effekte geben, zum einen ein Text auf schwarz/ Transparentem Hintergrund, welcher auch einzeln funktioniert, der zweite sollte der selbe Effekt sein, aber mit einem anderen Link als der auf dem Bild, der leider nicht geht, jedenfalls nicht richtig.

Mein momentaner Code schnipsel sieht wie folgt aus ;

http://jsfiddle.net/pokavjpc/



Ich hoffe jemand könnte mir bei meinem Problem helfen, da ich trotz etwas längerer suche zu keinem Ergebnis komme.

Da es eher ein Css Problem sein wird, habe ich leider im falschen unter Forum gepostet, vielleicht lieber ein Kaffee trinken bevor man etwas schreibt :)

 

[threadi]

Dein Code ist nicht valide. Der Link "Profil Text" darf nicht direkt unterhalb von <ul> stehen. Außerdem hast Du den Link falsch geschlossen (müsste vor dem </lI> enden, nicht danach).

Für mich stellt sich die Frage wo Du den "Profil Text" überhaupt anzeigen willst? Ebenfalls in Zusammenhang mit dem Bild oder unabhängig davon?

 

[Allkind92]

Hallo threadi,

dass ist mir gar nicht aufgefallen das ich es falsch geschlossen hatte.

Eigentlich hatte ich es so vor, dass der Link beim Hover über das Bild oben recht in der Ecke angezeigt werden sollte. Jedoch auch beim Hover sowohl der Text unten, als auch beim Hover dann über den Link sollte beides immer noch angezeigt werden und erst beim mouseout wieder weg sein.


Hoffe das ist irgendwie verständlich, wie ich es meine bzw. vorhabe.

 

[scbawik]

Hallo threadi,

dass ist mir gar nicht aufgefallen das ich es falsch geschlossen hatte.

Eigentlich hatte ich es so vor, dass der Link beim Hover über das Bild oben recht in der Ecke angezeigt werden sollte. Jedoch auch beim Hover sowohl der Text unten, als auch beim Hover dann über den Link sollte beides immer noch angezeigt werden und erst beim mouseout wieder weg sein.


Hoffe das ist irgendwie verständlich, wie ich es meine bzw. vorhabe.

Ich blicke bei deinem JSFiddle nicht ganz durch, aber ich denke dieser Selektor sollte dir weiterhelfen:

li:hover + .profile-content {
  opacity:1;
}

https://developer.mozilla.org/de/docs/Web/CSS/Adjacent_sibling_selectors

Mal davon abgesehen dass dein HTML semantisch falsch ist.

 

[Allkind92]

Ich blicke bei deinem JSFiddle nicht ganz durch, aber ich denke dieser Selektor sollte dir weiterhelfen:

li:hover + .profile-content {
  opacity:1;
}

https://developer.mozilla.org/de/docs/Web/CSS/Adjacent_sibling_selectors

Mal davon abgesehen dass dein HTML semantisch falsch ist.

Hallo,

danke erstmal für die Mühe. Leider funktioniert auch dies nicht zu 100%, es wird weiterhin nicht der Text mit dem Schwarz/Transparenten Hintergrund angezeigt, wie unten beim Bild, sondern nur beim drüberfahren - der Link.


Cheers,

Julian

 

[djheke]

So?
http://jsfiddle.net/yktb6ere/1/

 

[Allkind92]

Hallo djheke,

zwar ohne ;

background:rgba(0,0,0,.5);

und der Text nur oben rechts in der Ecke, aber ja, ganz genau das wollte ich machen. Vielen Vielen Dank

Dies anzupassen dürfe ich alleine hinbekommen.

Vielen Dank nochmal, sowie auch den anderen.


Cheers,

Julian