Mouse Over und CSS Background-Image

[MichaelM]

Ein Link soll eine bestimmte Hintergrundfarbe habe (backgroun-color:green;).
Somit wird wird ja ein rechticker Bereich grün gefuellt.

Nun moechte ich als Mouse-Over Effekt (a:hover) ein background-image anzeigen.
Dieses Bild soll aber unterhalb des grünen Texthintergrundsangezeigt werden.

Mit einer negativen Position Angabe im background-image wird das Bild dann abgeschnitten, die Angabe overflow funktioniert bei Hintergrundbildern nicht.

Wer kann helfen?

Danke!

[Der Martin]

Hallo,

Ein Link soll eine bestimmte Hintergrundfarbe habe (backgroun-color:green;).
Somit wird wird ja ein rechticker Bereich grün gefuellt.

"reckticker" gefällt mir. ;-)

Nun moechte ich als Mouse-Over Effekt (a:hover) ein background-image anzeigen.
Dieses Bild soll aber unterhalb des grünen Texthintergrundsangezeigt werden.
Mit einer negativen Position Angabe im background-image wird das Bild dann abgeschnitten, die Angabe overflow funktioniert bei Hintergrundbildern nicht.

Ähm, ja. Hintergrundbilder sind auf die Abmessungen ihres Elements beschränkt.

Um den Effekt zu realisieren, den du beschreibst, fällt mir spontan nur ein: Das Bild als img-Element einbinden, und zwar als zusätzlichen Inhalt des Links. Positioniere dann das Bild absolut, so dass es aus dem Anzeigekontext seines Elternelements (des Links) herausgelöst ist, und mach es im Normalzustand unsichtbar, bei :hover sichtbar. Letzteres geht entweder über display:none bzw. display:block, alternativ kannst du das Bild im nicht sichtbaren Zustand auch weit nach links ins Off schieben.

So long,
 Martin

[MichaelM]

Hallo Martin,

funktioniert soweit schonmal ganz gut, allerdings, wie bekomme ich das Bild, genau wie den Linktest, hor. zentriert?
text-align:center funktioniert nicht, align:center auch nicht.

Danke!