10 CSS-raamatukogu parema pildi hoverefektide jaoks

Kasutajatele lubamine lihtsalt ja selgelt teada, milline veebilehe osa on klõpsatav on oluline osa UX disainist. Vana, kuid kuldne viis seda teha oli teksti värvi muutmine ja selle rõhutamine. Tänapäeval on CSS-iga palju viise hoverefektide, eriti piltide jaoks.

Arendajad saavad nüüd lisage üleminekuefektid või animatsioon, kui hover sündmus käivitub. Me vaatame suundslaidi, suurendame erinevaid kiirusi, fade-ins ja fade-out, liigendefekte, prožektorite paljastamist, vajumist, põrkamist ja rohkem.

Selles koostises on olemas rohkem kui 250 hoverefekti sind inspireerida. Võite ka koodi hankida allikast.

Image Hover Effects (16 efekti)

Sellel lehel leiad kena 16 hoveri kujutiste kogumit, millel on pealdised. Haarake iga efekti HTML- ja CSS-kood, libistades piltide kohal ja klõpsates Näita koodi.

Image Caption Hover Animatsioon (4 efekti)

Siin on 4 lahe pealdise animatsiooni, mis töötavad siis, kui üks hovers üle pildi. Efektid on ehitatud puhta CSS3 üleminekuga ja teisendavad ning ei võimalda JavaScripti, et suurendada brauserit.

iHover (35 efekti)

iHover on kogum hoverefekte, mida toetab CSS3. Seal on 20 ringi hoverefekti ja 15 ruutu hoverefekti. Efektide kasutamiseks peate kirjutama HTML-märgistuse ja lisama CSS-failid.

Image Hover (44 efekti)

See raamatukogu sisaldab 44 puhta CSS-ga tehtud efekti. Mõned mõjudest on kahanemine, lükamine, slaidid, hinged, paljastused, suumimine, hägused, peegeldused, voldid ja aknaluugid mitmes suunas. On olemas laiendatud versioon 216 efektist, mida saab osta € 14 eest.

Hover Effect Ideas (30 efekti)

See Codropi poolt tehtud demo kujutab endast inspiratsiooni piltide ja pealdiste vaheliste sujuvate üleminekute tegemisel. On kokku 30 efekti kahel komplektil koos õpetustega ja lähtekoodiga.

Hover CSS (108 efekti)

Hover CSS võimaldab teil lisada hoverefekte igale elemendile, näiteks nupule, lingile või pildile. Mõjudeks on 2D üleminekud, taustamuutused, piiri, Shadow ja Glow siirded jne. Raamatukogu on saadaval CSS, Sass ja LESS.

Animatism (100+ efekti)

Nuppudele, ülekattele, detailidele, pealdistele, piltidele ja sotsiaalse meedia nuppudele on rohkem kui 100 pilti hõljuvat animatsiooni. Kõiki mõjusid toidab CSS3.

Pealkiri Hover Effect (7 efekti)

Selles kogumikus on 7 erinevat efekti. Kõik üleminekud näevad tõesti kena ja sile. Minge juhendi sektsioonile, et õppida, kuidas neid efekte oma projektile rakendada.

CSS Image Hover efektid (15 efekti)

Kogumine lihtsaid hoverefekte nagu suum, slaid, pööramine, hall skaala, hägusus, läbipaistmatus ja muud põhiefektid. Neid efekte saate kasutada CSS-klassi lisamisega joonis silt.

Suunatundlik 3D hover efekt

See on superjahukas hoverefekt, mis tuvastab teie viimase hiire liikumise. Pildi pealdised avanevad ühest neljast suunast, mis põhinevad viimase kursori positsioonil.

Hover Animatsioon

Siin on UNIQLO-st inspireeritud piiriäärne animatsioon. Hover-sündmuse korral muutub pildi piir animatsiooniks.

Plaadid, millel on Animated Hover

Üheks plaatide kujunduseks on see aeglane suum, slaidid, hüpikaknad, tumedad ülekatted teiste hulgas.

SVG klipp - tee hoverefekt

Väga fantastiline röntgenkiirguse valgustuse efekt, mida toetab SVG clip-path ja CSS üleminekud. Töötab hästi Chrome'i, Opera ja Safari puhul.