Behöver du en cool hover effekt för något på din webbplats? Sök inte mer! Vi har skapat flera anpassade exempel som du kan se live för inspiration.
Om du gillar effekten, stjäl den! Vi har CSS redo och väntar på att du ska kopiera.
Ta med dig din livliga webbplats
Höger effekter kan göra din webbplats känns mycket mer dynamisk och levande. Det brukade vara så att JavaScript var nödvändigt för att göra någonting riktigt intressant med en svängareffekt men i dag kan CSS3 göra massor av riktigt coola saker om du skapar tillräckligt.
Effekterna vi använder idag är alla användarkoder som stöds av moderna webbläsare, vilket givetvis betyder Mozilla och Webkit för det mesta. IE-stödet är spottigt i bästa fall över olika versioner, så var noga med att testa grundligt i din egen implementering. Fancy hover effekter är en av de saker som du vanligtvis kan försämra ganska graciöst så att äldre webbläsare fortfarande ser lite förändring.
Bump Up
Live-demo: Klicka här för att starta
Det här fungerar bäst när du har en serie horisontella föremål. På det sättet när du kör din mus över dem får du en fin vågseffekt.
Den här är super lätt att implementera och det finns faktiskt flera sätt att gå om det. Vad jag gjorde nedan gäller bara en marginal för varje bild och minskar sedan marginen på svävaren. Marginalen börjar vid 15px och minskar sedan till endast 2px på svävar, vilket gör att bilden hoppa upp. Du kan enkelt använda samma effekt på textobjekt om de var i en lista.
Övergången här är helt frivillig eftersom effekten fortfarande fungerar ganska bra utan den. Bara för att göra det lite jämnare, men jag kastade in en snabb animationsuppsättning för att lindra, vilket jag trodde gav den bästa effekten för det här ämnet.
Bump Up CSS
Stack & Grow
Live-demo: Klicka här för att starta
För den här jag ville ha en slags lava lampeffekt så att när du flyttar musen nerför listan expanderar varje bild långsamt och går sedan tillbaka till sin ursprungliga storlek.
För att uppnå detta lade jag in en stapel bilder som var 400px breda med 133px långa. Jag dimensionerade sedan dessa bilder på 300px med 100px i CSS och expanderade på svävaren. Eftersom jag hade en centruminriktning slängde den nya storleken på bilden min inriktning, en negativ marginal som sattes till hälften av tillväxten i bredden som åtgärdades för detta problem.
Stack & Grow CSS
Fade Text in
Live-demo: Klicka här för att starta
För den här jag ville skapa en JavaScript-liknande händelse där du kan sväva över ett objekt och se en effekt på en annan. Vad jag har gjort för att uppnå detta är att kasta lite text och en bild i en div och flyta sedan allt som lämnas så att texten stämmer överens med bilden. Därefter tillämpade jag färg: transparent och linjehöjd: 0px till div. Detta placerar texten högst upp i div och döljer den.
För att få texten att visas på svävar ändrade jag helt enkelt färgen och linjens höjd. När du sveper över bilden, zoomar texten i sikte! Det är ett ganska snyggt trick med tanke på att det är allt CSS.
Fade text i CSS
Crooked Photo
Live-demo: Klicka här för att starta
Den här är super enkel men det är en bra effekt för ett miniatyrbilds galleri. Den grundläggande förutsättningen är att du skapar ett galler av bilder och sedan ställer in bilderna att rotera när du svävar över dem, vilket ger en illusion av ett krokigt foto som hänger på en vägg.
Vi använder mycket nyare, webbläsarspecifik CSS på den här så att du kanske vill lägga till något för äldre webbläsare också. Vårt galleri kommer att använda boxskuggor (tillval), övergångar och transformeringar för att dra av den effekt vi vill ha. Transformen kommer att hantera rotationen och övergången gör den fin och smidig.
För att ta den här ännu längre kan du använda pseudo-selektorer för att göra bilderna luta sig i olika riktningar.
Crooked Photo CSS
Fade In och Reflektera
Live-demo: Klicka här för att starta
Den här är ganska komplicerad så jag var tvungen att kämpa med det ganska innan jag kom fram till en effekt som jag gillade. Bildens standardläge har en något minskad opacitet.När du svävar över det, så vrider opaciteten till fullo, en glöd dyker upp runt kanterna och en reflektion (endast Webkit) dyker upp.
Tyvärr är reflektionen inte något som svarar på en övergång, så det kommer bara att dyka in med en gång medan resten vilar, men det är fortfarande en ganska fin övergripande övergång.
Om du är förvirrad över hur CSS-reflektioner fungerar kan du läsa allt om dem i en bra artikel från David Walsh.
Fade in och reflektera CSS
Slutsats
Dessa fem exempel borde räcka för att inspirera dig att skapa dina egna fantastiska CSS-svängareffekter. Kom ihåg att experimentera med dessa, kombinera dem och lägg till din egen känsla för att göra dem mer intressanta.
Om du har upptäckt några coola svängverkningar på webben vill vi se dem! Lämna en kommentar nedan och länka till en sida med ett exempel.