CSS Hover für Bilder - wie geht das?

[Mellipupsi]

Hallo,

ich hab schon das Internet abgesucht nach Hilfe, aber irgendwie verwirrt mich das alles nur, weil nur so abgehakte Antworten gibt.

Ich will einfach einem Bild einen Hover geben, sprich wenn man das Bild sieht ist es z.B weiß mit einer schwarzen Aufschrift und wenn ich mit der Maus drüber gehe wird das Bild rot mit weißer Aufschrift.

Was muss ich tun, damit ich diesen Effekt hinbekommen? Muss doch irgendwie zwei Bilder übereinander legen können oder so ähnlich...

Liebe Grüße
Melanie

 

[Arcsinh]

Du kannst einem div dein Bild als background-image zuweisen und dem div ein hover geben und so dein background-image ändern.

 

[Mellipupsi]

sowas hab ich schon recht oft gelesen aber ich kann mir da kein Bild machen wie das aussehen würde - das Problem was ich jetzt habe ist, dass das Hover Bild unter dem eigentlich Bild sitzt und so nur ein Rand entsteht. Weil das Bild muss verlinkt sein, was ja mit Background Bildern nicht geht...

 

[threadi]

Du hast den Satz nicht ganz verstanden. Nochmal anders formuliert:

element { background-image: url(dasBildwasdirektzusehenist.jpg); }
element:hover { background-image: url(dasBildwasbeiMouseOverzusehenist.jpg); }

Du bindest dabei kein Bild per <img>-Element ein.

 

[Space Vampire]

Hier hast du mal ein Live-Beispiel.
Schau dir den Code an.
Vielleicht gibt das ein besseres Verständnis.
KLICK

unter .klasse{} gibst du die grundlegende Formatierung des Elementes ein und unter .klasse:hover{} alles was beim Mouseover verändert werden soll

 

[prm]

Da gibt es verschiedene Möglichkeiten.
Die üblichste ist wohl, das Hintergrundbild zu tauschen. Eine anleitung hierzu findest du hier unter Ziffer 2: Link-Buttons
Eine weitere Möglichkeit: Bild-Hover-Effekt