10 CSS-bibliotheken voor betere beeld-zweefeffecten

Gebruikers laten gemakkelijk en duidelijk weten op welk gedeelte van de webpagina kan worden geklikt is een belangrijk onderdeel van het UX-ontwerp. De oude maar gouden manier om het te doen was om de tekstkleur te veranderen en te onderstrepen. Tegenwoordig zijn er met CSS nog veel meer manieren om hover-effecten te leveren, met name aan afbeeldingen.

Ontwikkelaars kunnen nu voeg overgangseffecten of animatie toe wanneer een zweefgebeurtenis wordt geactiveerd. We kijken naar directionele dia's, zoomlenzen op verschillende snelheden, fade-ins en fade-outs, scharniereffecten, spotlight-onthullingen, wiebelt, bounces en meer.

In deze compilatie zijn er meer dan 250 zweefeffecten om je te inspireren. Je kunt de code ook bij de bron ophalen.

Afbeelding zweefeffecten (16 effecten)

Op deze pagina vind je een mooie verzameling van 16 hover-afbeeldingen met bijschriften. Pak de HTML- en CSS-code voor elk effect vast door over de afbeeldingen te bewegen en vervolgens op te klikken Toon code.

Afbeelding bijschrift Zweven Animatie (4 effecten)

Hier volgen 4 coole ondertitelingsanimaties die worden weergegeven wanneer er een over de afbeelding zweeft. De effecten zijn gebouwd met pure CSS3-overgangen en transformeren, en geen JavaScript, om de compatibiliteit met de browser te vergroten.

iHover (35 effecten)

iHover is een verzameling zweefeffecten, mogelijk gemaakt door CSS3. Er zijn 20 cirkel-zweefeffecten en 15 vierkante zweefeffecten. Om de effecten te gebruiken, moet u wat HTML-markup schrijven en de CSS-bestanden opnemen.

Afbeelding zweeft (44 effecten)

Deze bibliotheek bevat 44 effecten gemaakt met pure CSS. Enkele van de effecten zijn onder meer fades, stoten, dia's, scharnieren, onthullingen, zoomlenzen, vervaagt, flips, plooien en luiken, in meerdere richtingen. Er is een uitgebreide versie van 216 effecten die je kunt kopen voor € 14.

Hover Effect-ideeën (30 effecten)

Deze demo van een afbeelding-hover gemaakt door Codrop, geeft je inspiratie bij het maken van vloeiende overgangen tussen afbeeldingen en bijschriften. Er zijn totaal 30 effecten op twee sets met zelfstudies en de broncode.

Beweeg CSS (108 effecten)

Met Hover CSS kun je zweefeffecten toevoegen aan elk element, zoals een knop, link of afbeelding. De effecten omvatten 2D-overgangen, achtergrondovergangen, grensovergangen, schaduwovergangen en gloedovergangen, en meer. De bibliotheek is beschikbaar in CSS, Sass en LESS.

Animatism (100+ effecten)

Er zijn meer dan 100 animaties voor animaties van afbeeldingen op knoppen, overlays, details, bijschriften, afbeeldingen en socialemediaknoppen. Alle effecten worden mogelijk gemaakt door CSS3.

Caption Hover Effect (7 effecten)

Er zijn 7 verschillende effecten in deze collectie. Alle overgangen zien er heel mooi en soepel uit. Ga naar de tutorial sectie om te leren hoe deze effecten op uw project kunnen worden toegepast.

CSS-afbeelding zweeft effecten (15 effecten)

Een verzameling eenvoudige zweefeffecten zoals zoomen, schuiven, roteren, grijsschaal, vervaging, dekking en andere basiseffecten. U kunt deze effecten gebruiken door de CSS-klasse vóór uw toe te voegen figuur label.

Richtingbewust 3D-hovereffect

Dit is een super cool hover-effect dat je laatste muisbeweging detecteert. De bijschriften voor afbeeldingen worden geopend vanuit een van de vier richtingen op basis van uw laatste cursorpositie.

Hover-animatie

Hier is een animatie met een zweefteken geïnspireerd op UNIQLO. Bij een zweefgebeurtenis wordt de rand van de afbeelding geanimeerd.

Tegels met geanimeerde zweeftekst

Een voor tegelontwerpen, deze is voorzien van langzaam zoomen, dia's, pop-ins, gedimde overlay onder anderen.

SVG-clip-pad-zweefeffect

Een super geweldig röntgenfoto-effect met zwevende schijnwerper, mogelijk gemaakt door SVG clip-path en CSS-overgangen. Werkt prima op Chrome, Opera en Safari.