10 CSS-bibliotek för bättre bildhöjningseffekter

Låter användare enkelt och tydligt vet vilken del av webbsidan som är klickbar är en viktig del av UX-designen. Det gamla, men guldliga sättet att göra det var att ändra textfärgen och understryka den. Nuförtiden, med CSS, finns det många fler sätt att leverera svängningseffekter, särskilt för bilder.

Utvecklare kan nu Lägg till övergångseffekter eller animeringar när en svängnings händelse utlöses. Vi tittar på riktningslister, zoomar i olika hastigheter, fade-ins och fade-outs, gångjärnseffekter, spotlight avslöjar, wobbles, studsar och mer.

I denna sammanställning finns det mer än 250 svever effekter att inspirera dig. Du kan också hämta koden vid källan.

Bildhakeffekter (16 effekter)

På den här sidan hittar du en fin samling av 16 svängareffekter med bildtexter. Ta tag i HTML- och CSS-koden för varje effekt genom att sväva över bilderna och klicka sedan på Visa kod.

Image Caption Hover Animation (4 effekter)

Här är 4 coola bildtexter som körs när man svänger över bilden. Effekterna är byggda med rena CSS3-övergångar och transformer, och ingen JavaScript, för att öka kompatibiliteten över webbläsaren.

iHover (35 effekter)

iHover är en samling svävareffekter drivna av CSS3. Det finns 20 cirkelhuvudseffekter och 15 kvadratiska svängverkan. För att använda effekterna måste du skriva lite HTML-markup och inkludera CSS-filerna.

Image Hover (44 effekter)

Detta bibliotek innehåller 44 effekter gjorda med ren CSS. Några av effekterna inkluderar bleknar, trycker, glider, gångjärnen, avslöjar, zoomar, försvinner, flips, vikar och fönsterluckor, i flera riktningar. Det finns en utökad version av 216 effekter som kan köpas för € 14.

Hover Effect Ideas (30 effekter)

Denna bildhuvuddemo som gjorts av Codrop, ger dig inspiration när du gör smidiga övergångar mellan bilder och dess bildtexter. Det finns totalt 30 effekter på två uppsättningar med handledning och källkoden.

Höger CSS (108 effekter)

Hover CSS låter dig lägga till svängareffekter till något element, till exempel en knapp, länk eller bild. Effekterna inkluderar 2D-övergångar, bakgrundsövergångar, gränser, skugg och glödövergångar och mer. Biblioteket finns tillgängligt i CSS, Sass och LESS.

Animatism (100 + effekter)

Det finns mer än 100 bildhuggningsanimeringar till knappar, överlagringar, detaljer, bildtexter, bilder och sociala medier. Alla effekter drivs av CSS3.

Caption Hover Effect (7 effekter)

Det finns 7 olika effekter i denna samling. Alla övergångar ser väldigt snygga och smidiga ut. Gå till handledningssektionen för att lära dig hur du applicerar dessa effekter på ditt projekt.

CSS Image Hover Effects (15 effekter)

En samling enkla svävar effekter som zoom, glida, rotera, gråskala, oskärpa, opacitet och andra grundläggande effekter. Du kan använda dessa effekter genom att lägga till CSS-klassen före din figur märka.

Direktmedveten 3D-svängareffekt

Detta är en super cool svängareffekt som upptäcker din senaste musrörelse. Bildtexten öppnas från en av fyra riktningar utifrån din sista markörposition.

Hover Animation

Här är en animering av gränsvärlden inspirerad från UNIQLO. Vid en svängningshändelse blir gränsen för bilden animerad.

Kakel med Animerad Hover

En för kakel design, den här har långsam zoom, diabilder, pop-ins, dimmad överläggning bland andra.

SVG clip-path Hover Effect

En super fantastisk röntgenstrålkastare bildhuggareffekt som drivs av SVG clip-path och CSS övergångar. Fungerar bra på Chrome, Opera och Safari.