Div oder span über Bild einblenden mit :hover

Homepage selbermachen 7.846 Themen, 35.563 Beiträge

Div oder span über Bild einblenden mit :hover

hansapark am 20.03.2011, 14:03 / 8 Antworten / Flachansicht

Hallo.

Ich habe gefloatete divs, die eine Galerie ergeben. In jedem div ist ein thumbnail-Bild.
Wie kann ich am einfachsten erreichen (mit CSS) dass bei MouseOver-Bild rechts oben in der Ecke meines Bildes ein kleines div (oder z.b. ein span) erscheint? Also über dem Bild.

(so ähnlich wie bei facebook)

Alles was ich probiert habe ist gescheitert.

Wie kann man da generell herangehen?

Vielen Dank. weiß nicht mehr weiter
h.

Mit :hover kannst du nur das angezeigte Element selbst manipulieren, nicht ... Zaphod 20.03.2011, 14:15

Wäre das nicht auch wie folgt möglich? div.aussen div.innen display:none ... Borlander 20.03.2011, 15:29

Hallo. So in der Art hatte ich es auch probiert, aber irgendwie ging es ... hansapark 20.03.2011, 17:29

Also bei mir funktioniert es damit: Borlander 20.03.2011, 19:04

Hallo. Ja , jetzt geht es bei mir auch . Bleibt nur das Problem, dass das ... hansapark 20.03.2011, 20:58

und position:absolute ist glaube nicht geeignet, da es auf so viele Bilder ... Borlander 20.03.2011, 21:39

hallo. ich habe es hinbekommen. habe dem eltern-element div nach seinem ... hansapark 22.03.2011, 15:55

xafford

hansapark „hallo. ich habe es hinbekommen. habe dem eltern-element div nach seinem float...“

22.03.2011, 17:09 Optionen

ich glaube das war der haken, dass das eltern-div kein relative hatte.

Eine kleine Erläuterung hierzu: Ja, Du hast Recht, das Verhalten von position ist teilweise gewöhnungsbedürftig. Ein position:relative bewirkt, dass ein Element relativ zu seiner eigentlichen Position auf dem Bildschirm (also der die es ohne Manipulation hätte) ausgerichtet wird. Notiert man also ein position:relative und ein top:10px, so wird das Element 10 Pixel tiefer angezeigt, als es ohne diese Angabe angezeigt würde.

Im Gegensatz hierzu bewirkt position:absolute (wie der Name schon sagt) eine absolute Positionierung mit den Positionsangaben. Ein Element mit position:absolute und top: 10px wird also unabhängig von seiner eigentlichen Positionierung auf dem Bildschirm bei 10 Pixeln von oben angezeigt.

Der Fallstrick hierbei ist jedoch der Bezugspunkt. Bei position:relative ist dieser recht einfach, da er irrelevant ist, denn das Objekt ändert seine Position immer um den angegeben Wert zu seiner ursprünglichen Position. Tricky wird es bei position:absolute, denn hier ist das Bezugssystem wichtig. Der Nullpunkt für die Verschiebung ist immer das erste positioniert Elternelement. Gibt es kein positioniertes Elternelement, so ist der Bezugspunkt das Browserfenster.

Will ich also, dass ein Kindelement in der linken oberen Ecke seines Elternelementes erscheint, so muss ich dafür sorgen, dass das Elternelement positioniert ist um als Bezugspunkt zu dienen. Deswegen muss das Elternelement eine Pseudo-Positionierung erhalten (mit position:relative) und das Kind absolut hierzu positioniert werden.

Eine weitere Anmerkung noch: Die Pseudoklasse :hover wird nicht von jedem Browser bei jedem HTML-Element unterstützt.. Ein div:hover funktioniert also nicht überall (Gruß an unseren Lieblingsbrowser IE