Trädvy Permalänk
Medlem
Registrerad
Aug 2011

Hover med ny text?

Hej!
Jag har en bild som är en länk. Till den vill jag ha en hover-effekt, där effekten är en halvtransparent färg samt lite beskrivande text - med radbrytning - centrerat på bilden. Den tonade färgen ser jag inget problem med, men hur gör jag bäst texten? Jag skulle kunna lägga den som alt-text och visa/dölja med display:none, men då kan jag inte styra radbrytningen. Radbrytningen behövs p.g.a. den text som ska visas, t.ex.:
Mona Lisa
av Leonardo

Finns det nåt gängse enkelt sätt att lösa det på som jag förbisett?

Trädvy Permalänk
Medlem
Registrerad
Maj 2013
Skrivet av pigge_85:

Hej!
Jag har en bild som är en länk. Till den vill jag ha en hover-effekt, där effekten är en halvtransparent färg samt lite beskrivande text - med radbrytning - centrerat på bilden. Den tonade färgen ser jag inget problem med, men hur gör jag bäst texten? Jag skulle kunna lägga den som alt-text och visa/dölja med display:none, men då kan jag inte styra radbrytningen. Radbrytningen behövs p.g.a. den text som ska visas, t.ex.:
Mona Lisa
av Leonardo

Finns det nåt gängse enkelt sätt att lösa det på som jag förbisett?

Det enklaste som jag kan komma på just nu är väl att skapa en <div> med samma storlek som bilden, och sedan sätta bilden som background-image. Sen döljer/visar du bara din <div> på hover (din <div> innehåller då texten som ska visas).

M-ITX: Fractal Design Node 304 Gigabyte H97N i7 4790k Msi GTX980 Gaming Ballistix Sport 16GB @ 1600MHz