CSS3 afbeeldingen hover effecten

vlieg er overheen

Geschreven door: op

Met CSS3 zijn er weer veel mogelijkheden bijgekomen waarbij o.a. CSS gebruikt kan worden t.b.v. een animatie-effect. Wat voorheen voornamelijk gedaan werd met Javascript (jQuery?) kan nu ook met CSS(3).

Veel soorten animaties gaan sneller met CSS3 dan met bijvoorbeeld het Javascript framework jQuery. Dit komt hoofdzakelijk door het feit dat CSS3 animaties door moderne browsers gegenereerd worden vanuit de zgn. videokaart in een computer i.p.v. de standaard processor. Technisch: dit geld overigens alleen voor de volgende CSS3 animaties: scale, rotation, translation, skew en opacity.

Overigens kan ook met Javascript de videokaart gebruikt worden , bijv. met translate3d() of matrix3d().

Ander pluspunt om CSS animaties te gebruiken i.p.v. javascript is een stukje usability. Javascript animaties blijven, op volgorde, in het geheugen van een computer achter en worden stuk voor stuk na elkaar uitgevoerd...ook als de muis zich op dat moment ergens anders bevindt zullen de Javascript animaties uitgevoerd worden. Denk hierbij bijvoorbeeld aan een rij horizontale knoppen (menu?) met een uitklapmenu. Als je snel van links naar rechts gaat over de knoppen zullen alle knoppen geanimeerd uitklappen. Met CSS heb je hier geen last van. Een CSS animatie zal hier geen last van hebben, deze wordt namelijk alleen uitgevoerd indien het betreffend element echt actief is.

Waar klanten vaak niet bij stil staan is dat een bepaald hover-effect ook een animatie is. Om allerlei mogelijkheden hiermee te laten zien heb ik hieronder veel voorbeelden gemaakt te inspiratie voor u!

Scaling image
Demo tekst Scaling tekst
Inner border

Nu brengen we alle drie verschillende hover-effecten naar 1 afbeelding om een gecombineerd effect te kunnen zien.


De volgende hover effecten worden vaak toegepast indien een zgn. modal-window geopend gaat worden.

CSS3 afbeeldingen hover effecten Aantal keer bekeken: 3.072