10 CSS biblioteka za efekte boljeg prikaza slika

Dopuštanje korisnicima lako i jasno znati koji dio web-stranice je moguće kliknuti je važan dio UX dizajna. Stari, ali zlatni način rada bio je promijeniti boju teksta i podcrtati je. Danas, s CSS-om, postoji mnogo više načina za isporuku efekata hover-a, posebno na slike.

Programeri sada mogu dodajte efekte prijelaza ili animaciju kada se pokrene događaj hover. Tražimo slajdove za usmjeravanje, zumiramo različitim brzinama, fade-ins i fade-outove, efekte zglobova, otkrivanje reflektora, pomicanje, odbijanje i drugo.

U ovoj kompilaciji postoje više od 250 efekata lebdjenja da vas nadahnu. Kôd možete podići i na izvoru.

Efekti prijenosa slike (16 učinaka)

Na ovoj stranici naći ćete lijepu zbirku od 16 efekata prikazanih hover slikama s opisima. Zgrabite HTML i CSS kôd za svaki efekt lebdeći iznad slika, a zatim kliknite Prikaži kod.

Animacija natpisa naslova slike (4 efekta)

Ovdje su 4 kul animacije naslova koje se pokreću kada se krećete iznad slike. Efekti su izgrađeni s čistim CSS3 prijelazima i transformacijama, i bez JavaScripta, kako bi se povećala kompatibilnost preko preglednika.

iHover (35 učinaka)

iHover je zbirka efekata lebdenja koje pokreće CSS3. Postoji 20 efekata kružnog hover i 15 kvadratnih efekata lebdenja. Da biste koristili efekte, morat ćete napisati nešto HTML oznake i uključiti CSS datoteke.

Slika Hover (44 učinka)

Ova knjižnica sadrži 44 učinka napravljenih s čistim CSS-om. Neki od efekata uključuju blijedi, gura, slajdove, šarke, otkriva, zumira, zamagljuje, okreće, preklapa i zatvarača, u više smjerova. Postoji proširena verzija 216 efekata koji se mogu kupiti za 14 eura.

Ideje za efekte lebdenja (30 efekata)

Ovaj demo snimak prikazan od strane Codropa, daje vam inspiraciju pri izradi glatkih prijelaza između slika i njihovih opisa. Postoji ukupno 30 učinaka na dva seta s vodičima i izvornim kodom.

Zadržite CSS (108 učinaka)

Hover CSS omogućuje dodavanje efekata lebdenja bilo kojem elementu, kao što je gumb, veza ili slika. Efekti uključuju 2D prijelaze, prijelaze u pozadini, granice, prijelaze Shadow i Glow i još mnogo toga. Knjižnica je dostupna u CSS-u, Sass-u i LESS-u.

Animatism (100+ efekata)

Postoji više od 100 animacija za prikazivanje slika do gumba, slojeva, detalja, opisa, slika i gumba društvenih medija. Sve efekte pokreće CSS3.

Utjecaj natpisa Hover (7 efekata)

Postoji 7 različitih učinaka u ovoj zbirci. Svi prijelazi izgledaju jako lijepo i glatko. Idite na odjeljak s uputama kako biste saznali kako primijeniti te učinke na vaš projekt.

Učinci CSS slike (15 učinaka)

Zbirka jednostavnih efekata lebdenja kao što su zumiranje, slajd, rotiranje, siva skala, zamućenje, neprozirnost i drugi osnovni efekti. Te učinke možete koristiti dodavanjem CSS klase prije lik označiti.

3D efekt lebdjenja koji je svjestan smjera

Ovo je super kul efekt koji će otkriti vaš posljednji pokret miša. Opisi slika otvaraju se iz jednog od četiri smjera na temelju zadnjeg položaja pokazivača.

Animacija lebdjenja

Ovdje je prikazana animacija na granici koja je inspirirana UNIQLO-om. Nakon događaja hover, granica slike će postati animirana.

Pločice s animiranim lebdjenjem

Jedan za pločice dizajna, ovaj jedan značajke sporo zumiranje, slajdove, pop-ins, zatamnjena overlay među ostalima.

SVG isječak-putanje Hover efekt

Super strašan X-ray spotlight efekt hover efekt powered by SVG clip put i CSS prijelazi. Dobro radi na Chromeu, Operi i Safariju.