[CSS] Hover-Effekt mit Bildern

[lsgdcity]

Hi,

ich wollte mal fragen, ob es die Möglichkeit gibt den Hover-Effekt bei Hyperlinks so zu benutzen, dass das ganze mit Grafiken funzt?

Ich hab ne Grafik als Link und wenn ich drüberfahr soll ein anderes Bild angezeigt werden. Das ganze nur mit CSS und nicht mit JS.

Wisst ihr da weiter?

Big Thx

[wahsaga]

Re: [CSS] Hover-Effekt mit Bildern

statt bild per <img> einzubinden, den link selber entsprechend formatieren ...

hintergrundbild für a:link, anderes hintergrundbild für a:hover.

[mrhappiness]

und den link so groß machen, dass man das gesamte bild sieht?

[Wurzel]

vielleicht ne blöde (verständnis)frage dazu:

ich habe den eindruck, dass bilder, die per css eingebunden werden "träger" reagieren als bei den üblichen mouseover+js geschichten.

werden die anders/nicht gecached oder liegts am einfach browser?

[wahsaga]

es ist u.U. möglich, dass die nicht automatisch vorgeladen werden, sondern wirklich erst dann angefordert werden, wenn der betreffende :hover-zustand zum ersten mal eintritt.

das ist aber bei JS-lösungen auch nicht anders, vorladen passiert auch nur, wenn es explizit impementiert wird.

aber davon ab, ist mir da bisher noch kein signifikanter unterschied aufgefallen ...

[mrhappiness]

und da solche grafiken meistens farbverläufe sind, kannst du ja auch ein grooooßes bild machen, in dem beide starus (normal und hover) untereinander/hintereinander sind

beim hover musst du dann nur das bereits geladene bild verschieben

[Wurzel]

hmm ... scheint mein browser zu sein ... egal.

[lsgdcity]

Hi,

@mrhappiness: Deine Lösung klingt ganz vernünftig... aber wie leg ich die bilder übereinander und verschiebe diese? hab so gesehen noch nicht soo intensiv mit css gearbeitet (grad mal divs und text formatiert)...


vielen dank

[wahsaga]

Original geschrieben von Lukas Schulze
aber wie leg ich die bilder übereinander und verschiebe diese?

nicht mehrere bilder übereinanderlegen, sondern ein bild machen, welches beide zustände beinhaltet.

und dann über background-position derart positionieren, dass im link immer nur ein teil des hintergrundbildes sichtbar ist.

(dafür muss der link natürlich feste maße haben, und das bild etwa doppelt so groß sein.)

[lsgdcity]

Hi,

oh nee... das geht bei mir nicht...

schau: oben im forum ist der button PROFIL, REGISTER, ...
und diese haben einen schwarzen rahmen.
bei mir ist der rahmen breiter und dunkeblau und RUND!
Wenn man nun drüberfährt, wird das innere weiß, anstatt blau.

gibt es da wirklich nur die JS-methode?
wenn ja: welches ist denn da des einfachste (funzt auf fast jedem browser & man kann jedes bild extra festlegen)?