10 biblioteci CSS pentru efecte mai bune de hartă a imaginii
Permite utilizatorilor ușor și clar știți care parte a paginii web este clicabilă este o parte importantă a designului UX. Modul vechi, dar de aur de a face aceasta a fost de a schimba culoarea textului și subliniați-o. În zilele noastre, cu CSS, există mult mai multe moduri de a furniza efecte de hover, în special la imagini.
Dezvoltatorii pot acum adăugați efecte de tranziție sau animație atunci când este declanșat un eveniment de mutare. Ne uităm la diapozitive direcționate, zoom-uri la viteze diferite, decolorări și decolorări, efecte balamale, lumina reflectoarelor, vibrații, bounces și multe altele.
În această compilație există mai mult de 250 de efecte de hover pentru a vă inspira. Puteți, de asemenea, să ridicați codul la sursă.
Efecte de hartă a imaginii (16 efecte)
În această pagină veți găsi o colecție frumoasă de 16 efecte de hover imagini cu legende. Prindeți codul HTML și codul CSS pentru fiecare efect, trecând cu mouse-ul peste imagini, apoi făcând clic pe Afișați codul.
Imagine animată de captare a imaginii (4 efecte)
Iată patru animații cu capodopere minunate care rulează atunci când cineva se plimba peste imagine. Efectele sunt construite cu tranziții și transformări pure CSS3 și fără JavaScript, pentru a crește compatibilitatea în browser.
iHover (35 efecte)
iHover este o colecție de efecte hover propulsate de CSS3. Există 20 de efecte de mișcare în cerc și 15 efecte de hartă pătrată. Pentru a utiliza efectele, va trebui să scrieți câteva marcări HTML și să includeți fișierele CSS.
Image Hover (44 efecte)
Această bibliotecă conține 44 de efecte realizate cu CSS pur. Unele dintre efecte includ decolorări, împingeri, diapozitive, balamale, dezvăluiri, zoom-uri, blururi, flips, falduri și obloane, în direcții multiple. Există o versiune extinsă de 216 de efecte care pot fi cumpărate pentru 14 €.
Hover Effect Ideas (30 de efecte)
Demo-ul acestei imagini, realizat de Codrop, vă oferă inspirație atunci când faceți tranziții ușoare între imagini și subtitrările. Există 30 de efecte pe două seturi cu tutoriale și codul sursă.
Hover CSS (108 efecte)
Hover CSS vă permite să adăugați efecte de hover la orice element, cum ar fi un buton, o legătură sau o imagine. Efectele includ tranziții 2D, tranziții de fundal, tranziții la margini, Shadow și Glow și multe altele. Biblioteca este disponibilă în CSS, Sass și LESS.
Animatism (100 de efecte)
Există mai mult de 100 de animații de hovering de imagini pe butoane, suprapuneri, detalii, subtitrări, imagini și butoane de social media. Toate efectele sunt alimentate de CSS3.
Caption Hover Effect (7 efecte)
Există 7 efecte diferite în această colecție. Toate tranzițiile arată foarte frumos și neted. Accesați secțiunea tutorial pentru a afla cum să aplicați aceste efecte asupra proiectului dvs..
Efecte de hover imagine CSS (15 efecte)
O colecție de efecte de hover simple, cum ar fi zoom, slide, rotate, gri, estompare, opacitate și alte efecte de bază. Puteți utiliza aceste efecte adăugând clasa CSS înaintea dvs. figura etichetă.
Direcționarea 3D-efect de hover
Acesta este un efect super cool de hover care va detecta ultima mișcare a mouse-ului. Titlurile de imagine se vor deschide din una din cele patru direcții, pe baza ultimei poziții a cursorului.
Hover Animation
Aici este o animație de tip hover border inspirată de UNIQLO. La un eveniment de hover, marginea imaginii va deveni animată.
Placi cu hover animat
Unul pentru design-uri de tigla, acesta include zoom lent, diapozitive, pop-in-uri, suprapunere diminuata, printre altele.
SVG clip-Path Effect Hover
Un efect minunat de imagine cu raze X pentru lumina reflectoarelor reflectat de SVG clip-cale și tranziții CSS. Funcționează bine pe Chrome, Opera și Safari.
