10 CSS knihoven pro lepší efekty obrazu

Umožnění uživatelům snadno a jasně vědí, na kterou část webové stránky lze kliknout je důležitou součástí UX designu. Starý, ale zlatý způsob, jak to udělat, bylo změnit barvu textu a podtrhnout ho. V současné době, s CSS, existuje spousta dalších způsobů, jak přinést hover efekty, zejména na obrázky.

Vývojáři mohou nyní přidat efekty přechodu nebo animaci, když je spuštěna událost přechodu. Díváme se na směrové diapozitivy, přibližujeme se různými rychlostmi, fade-iny a fade-outs, efekty pantů, reflektorů, wobbleů, odrazů a dalších.

V této kompilaci existují více než 250 efektů vznášení inspirovat vás. Kód můžete také vyzvednout u zdroje.

Obrazové efekty (16 efektů)

Na této stránce naleznete pěknou sbírku 16 efektů obrázků s popisky. Uchopte kód HTML a CSS pro každý efekt tak, že se nad obrázky přesunete a poté kliknete Zobrazit kód.

Image Caption Hover animace (4 efekty)

Zde jsou 4 cool titulky animací, které běží, když se člověk pohybuje nad obrázkem. Efekty jsou postaveny s čistými přechody a transformacemi CSS3 a bez JavaScriptu, aby se zvýšila kompatibilita v prohlížeči.

iHover (35 efektů)

iHover je sbírka efektů vznášející se pomocí CSS3. K dispozici je 20 efektů vznášejících se v kruhu a 15 efektů přechodu na čtvereček. Chcete-li použít efekty, budete muset napsat nějaké HTML značky a zahrnout soubory CSS.

Obrázek Hover (44 efektů)

Tato knihovna obsahuje 44 efektů s čistým CSS. Některé z těchto efektů zahrnují fade, tlačí, skluzavky, závěsy, odhaluje, přibližuje, rozmazává, překlopí, záhyby a okenice, v několika směrech. K dispozici je rozšířená verze 216 efektů, které lze zakoupit za 14 €.

Nápady efektu (30 efektů)

Tento obrázek vznáší demo vytvořené společností Codrop, poskytuje inspiraci při hladkém přechodu mezi obrázky a jejich titulky. Existuje celkem 30 efektů na dvě sady s tutoriály a zdrojovým kódem.

Hover CSS (108 efektů)

Hover CSS umožňuje přidat efekty přechodu na libovolný prvek, například tlačítko, odkaz nebo obrázek. Mezi efekty patří 2D přechody, přechody pozadí, okraje, přechody Shadow a Glow a další. Knihovna je k dispozici v CSS, Sass a LESS.

Animatismus (Více než 100 efektů)

K tlačítkům, překryvným obrázkům, detailům, titulkům, obrázkům a tlačítkům sociálních médií existuje více než 100 animací. Všechny efekty jsou poháněny CSS3.

Efekt efektu titulku (7 efektů)

V této sbírce existuje 7 různých efektů. Všechny přechody vypadají opravdu pěkně a hladce. Přejděte do sekce výuky a dozvíte se, jak aplikovat tyto efekty na váš projekt.

CSS Image Hover efekty (15 efektů)

Sbírka jednoduchých efektů vznášení, jako je přiblížení, posun, otočení, stupnice šedi, rozostření, neprůhlednost a další základní efekty. Tyto efekty můžete použít přidáním třídy CSS před postava štítek.

3D efekt vznášející se ve směru pohybu

Jedná se o super cool vznášející se efekt, který detekuje váš poslední pohyb myši. Titulky se otevírají ze čtyř směrů podle vaší poslední pozice kurzoru.

Hover animace

Zde je hraniční animace inspirovaná UNIQLO. Po události přechodu se ohraničení obrázku animuje.

Dlaždice s animovaným Hoverem

Jeden pro návrhy dlaždic, tento má pomalý zoom, diapozitivy, pop-ins, ztlumené překrytí mezi ostatními.

SVG clip-Path Hover efekt

Super úžasný rentgenový reflektor obraz vznášet efekt poháněný SVG klip-cesta a CSS přechody. Funguje dobře na Chrome, Opera a Safari.