Permalänk
Avstängd

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?

Permalänk
Medlem
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).

Visa signatur

NZXT H510 Flow MSI B450 Tomahawk MAX
AMD Ryzen 5800X3D RX 7900XTX Kingston Fury 64GB
LG C2 42" 4K@120Hz AOC Q27G2U 1440P@144Hz