Posts Tagged CSS

Soms bestaat de noodzaak voor een link hover effect met afbeeldingen in een website. Normaliter zou je daar Javascript op loslaten, maar dat betekent gelijk dat de 5% procent van de wereld die Javascript in hun browser heeft uitgeschakeld jouw site heel anders ziet dan de bedoeling is.

Er is een lichtgewicht en redelijk kogelvrije oplossing om dit met uitsluitend CSS te realiseren.

Voor alle duidelijkheid, dit is een oplossing die bedoeld is voor hyperlinks.

Dit is de css:

a.hover{
display: block;
width: 100px;
height: 20px;
background: transparent url(jouwafbeelding.jpg) 0 0 no-repeat;
}

a.hover:hover{
background-position: -100px 0;
}

Voor het hover effect heb je twee afbeeldingen nodig, de default state en de hover state. De truc is om deze twee te combineren tot één afbeelding, waarbij de hover afbeelding rechts van de default afbeelding staat. Op die manier wordt de afbeelding direct geladen en heb je geen haperingen bij de overgang van de ene naar de andere state. In bovenstaand voorbeeld ga ik uit van een weergave van 100px breed met een image van 200px breed.

Je ziet in bovenstaande css dat de hover state background position -100 is, dit zorgt er voor dat in het block van 100px pas bij hover de rechter afbeelding wordt weergegeven.

Mijn afbeelding:

Het geheel in actie:

Link

Je kunt naast tekst ook uiteraard een afbeelding als link gebruiken, als je bijvoorbeeld een bijzonder font wil gebruiken. Zorg er dan wel voor dat die afbeelding hetzelfde formaat heeft als de waardes van het block.