Een hover-animatie is een kleine visuele verandering die afgaat als de muisaanwijzer over een element beweegt. Een knop wordt feller, een card komt omhoog met een zachte schaduw, of een onderstreping schuift onder een link tevoorschijn. Het draait om feedback: het bevestigt dat het element interactief is voor je überhaupt klikt.
Denk aan een deurbel die oplicht zodra je vinger in de buurt komt. Je hebt nog niets ingedrukt, maar je weet dat hij werkt en waar je moet drukken. Een hover-effect doet hetzelfde op het scherm, en het is een klassieke micro-interactie: klein, snel en makkelijk over het hoofd te zien als het goed gedaan is. Met zorg gebouwd leunt het op dezelfde principes als breder motion design, met korte duur en zachte easing.
Er is één ding om te onthouden. Touchscreens hebben geen hover, dus het effect draait simpelweg niet op een telefoon. Dat betekent dat hover glans mag toevoegen, maar nooit op zichzelf belangrijke informatie mag dragen. Houd de animatie snel, rond de 150 tot 250 milliseconden, zodat het responsief voelt in plaats van traag.
De technische kant telt zwaarder dan hij lijkt. Browsers verwerken transform en opacity op de GPU, dus die blijven boterzacht, zelfs op een goedkope laptop, terwijl het animeren van breedte, hoogte of top de pagina dwingt de layout opnieuw te berekenen en kan haperen. Een veelgebruikte variant is de simpele CSS-regel die een card bij hover een paar procent groter schaalt en de schaduw verdiept. En de juiste plek om dit te definiëren is de :hover-pseudoklasse, niet JavaScript, omdat CSS het gratis afhandelt en een reduced-motion-voorkeur respecteert als je die meeneemt.
Bij TopDevs gebruiken we hover-animaties om interactieve elementen levend te laten voelen, terwijl we zorgen dat alles ook perfect werkt via aanraking, waar geen aanwijzer is.
