35 tunay na nakakaaliw na mga epekto ng imahe ng CSS

Ngayon may mga imahe sa isang web ay naging pangunahing mang-agaw ng pansin sa gumagamit na lalapit dito para sa lahat ng uri ng mga paksa. Mula sa potograpiya, paglalakbay, mga produkto o eksena ng anumang uri, ang mga imahe ay isa sa pinakamahalagang elemento, kaya kung nakagawa kami ng isang kapansin-pansin na epekto, magkakaroon ang kapangyarihan ng larawang iyon na mapanatili ang gumagamit na nahulog sa aming website.

Ito ay kung ano ang marami sa mga epektong ito ay may kakayahang makamit sa isang bisita sa website. Ang mga CSS effects na talagang nakakaakit sa ilang mga kaso at sa iba mayroon silang layunin na maging mas simple, bagaman palaging nakakamit ang hinahangad nating lahat: na ang gumagamit ay mananatiling maingat sa lahat ng inaalok ng aming website. Listahan natin ngayon ang 33 mga epekto ng imahe ng CSS na malakas na nakakaakit.

Fluid Twisting Image 3D

Ang epekto ng imahe na ito ay talagang kamangha-mangha kapag mabulok ang imahe sa isang 3D cube na kung saan ay maaaring paikutin tungkol sa kanyang patayo upang makabuo ng isang mahusay na visual na epekto. Batay sa CSS3D, kung maipapatupad mo ito sa iyong website, walang imik ang bisita.

Kaugnay na artikulo:

35 pang mga CSS text effects para sa iyong website

3D hover effect

Isa pang mahusay na visual effects upang makamit iyon kapag naiwan natin ang mouse pointer sa imahe, ito mahulog na parang sinaktan ng pareho. Ang isang mahusay na animation para sa isa pang mahusay na epekto ng imahe.

CSS 3D Landscape

Magkakasabay ang HTML at CSS upang makagawa ng isang mahusay na epekto ng panorama na para bang nakatingin kami mula sa tuktok ng isang gusali sa isang lungsod.

Kaugnay na artikulo:

27 mahahalagang epekto sa teksto ng CSS para sa palalimbagan ng iyong website

Mga imahe sa "ikiling" na pananaw

Un visual na eksperimento na maaaring maghatid ng isang tiyak na layunin bilang isang bahagi sa web.

Mga blinds ng Venetian

Isang mahusay na visual effects tuwing iwanan ang mouse pointer kaya't nagbabago ito sa pagitan ng dalawang kaibahan na ibinibigay ng imahe.

Hatiin ang imahe

Sa pamamagitan ng pag-hover ng mouse pointer sa imahe, ito ay palakihin upang gawin itong perpektong binubuo.

I-hover ang epekto ng imahe

Ang isang grid effect ay ginawa kapag umaalis el mouse pointer sa loob ng isang tukoy na punto mula sa imahe.

Epekto ng salamin 

Ang larawan mga scroll na may mirror effect sa pag slide namin ng mouse pointer mula kanan pakanan at vice versa.

Larawan na may epekto ng pagsasalamin

Isang aksyon na naghahanap proyekto ang epekto ng pagsasalamin sa imahe na ginamit namin para sa epekto ng imahe ng CSS.

Ikiling ng imahe sa hover effect

Maabot medyo mahilo ka upang makita kung paano makagawa ang mga gilid ng imahe ng isang kapansin-pansin na dobleng epekto.

Hover blur effect

Habang inililipat natin ang pointer sa imahe, gumagawa ng isang blur effect na nawala sa ilang segundo.

Pag-hover ng imahe

Mayroong isang epekto ng pag-aalis sa parehong sandali kung saan inilalagay namin ang pointer mouse sa imahe.

I-hover ang epekto sa SVG

Isang mahusay na hover effect na naglalagay nakalantad ang imaheng nakatago sa ilalim ng mismong pangalan. Mahusay na tapusin at perpekto para sa pagpapakita ng isang malikhain at mausisa na gallery ng imahe.

Mula sa teksto hanggang sa imahe sa pag-hover

Ipinapakita ng teksto ang imahe kapag pinapagod namin ang mouse pointer gamit ang isang kapansin-pansin na animasyon may bulag na epekto bubukas yan mula sa gitna.

Ipinahayag ang bahagi ng isang imahe sa background

Parang nasa kamay namin ang crosshair ng isang telephoto lens, bahagi ng imahe ng background ay isiniwalat habang inililipat namin ang mouse pointer.

Mag-hover ng animation

Ng mahusay na epekto, ngunit napaka-simple sa komposisyon nito. Kung may hinahanap ka simplistic at minimalist, ang epektong ito ay magpapaibig sa iyo.

Epekto ng pagsubaybay sa hover

Iba simpleng epekto para sa isang tiyak na layunin.

Pag-zoom ng imahe

Ito ang tipikal na epekto ng pag-zoom na tiyak na gugustuhin mong dalhin sa iyong website ngayon.

Mag-zoom hover effect

Isa pang kahaliling tulad epekto ng pag-zoom kapag iniiwan namin ang pointer nakapatong ang mouse sa imahe.

Magnifying glass effect

Tulad ng ipinahihiwatig ng pangalan nito, ang ibabalik ng mouse pointer ang imahe sa isang magnifying glass na nagpapalaki nito.

Walang pag-hover sa JavaScript

Walang JavaScript maaari kang muling likhain ang isang zoom effect imahe na may variable na grid.

Epekto ng overlay ng CSS

Un purong epekto ng CSS para sa isang layer na naka-mount sa imahe na mayroon tayo.

Hovy para sa mga larawan

Mayroon kang isang library ng mga CSS na animasyon para sa mga elemento ng gumagamit. Maaari mong makita ang lahat sa kanila sa link upang makuha ang isa na pinakaangkop sa iyo. Marami kang mga effects na mapagpipilian may mahusay na kalidad.

Overlay ng Imahe

Na may mataas na kalidad na animasyon ng linya, ang nakakaakit na layering ay itinampok. Isa pa na maaaring maging paborito mo.

Epekto ng overlay ng imahe

Bumabalik kami na may isa pang epekto ng overlay sa HTML at CSS kung saan ang mga bilog na linya ay ang mga bida.

Epekto ng overlay ng imahe

Isang kapansin-pansin na epekto ng overlay na maaaring magamit para sa iba't ibang mga elemento sa web. Kasama ang a maliit na pagkamalikhain ay maaaring isama sa cards tulad ng mga nasa artikulong ito.

I-hover ang epekto sa animasyon ng icon

Mataas na kalidad na may isang animasyon na icon na magpapakita sa iyo sa mga unang ilang pagbabago. Kaya niya ilabas ang teksto sa mahusay na epekto.

I-hover ang epekto sa mga subtitle

Isa pang mahusay na hover na epekto sa mga subtitle na lilitaw na may isang napaka-makinis na animasyon at nakamit.

Mga epekto sa direksyon ng hover na 3D

Isa sa mga pinasisiglang epekto ng imahe na makikita mo sa buong listahan. Ang ang mouse pointer ay magiging gabay para sa «3D cube».

Scale ng imahe

Isa pang simpleng epekto, ngunit napaka palabas nang walang maraming yumabong.

iOS shadow effect na may React

Un epekto nang walang labis na pamaypay, ngunit napaka kongkreto sa anino na epekto na ito ay gumagawa, dahil parang ito ay itinaas mula sa "lupa".

Shadow Style iOS 10

Ang mouse pointer ay mayroong a epekto ng 'push' sa imahe na gumagawa ng mahusay na pagiging makatotohanan. Napakainteres.

Epekto ng paglipat ng imahe

Un kamangha-manghang epekto ng paglipat kung saan ang imahe ay nabubulok sa isang grid ng grids. Maaari mong kontrolin ang oras kung saan nangyayari ang epekto at higit pa.

Mag-scroll ng paglipat ng imahe

Un napaka-usong at malikhaing epekto ng paglipat para sa iyong website. Huwag palampasin ang appointment sa CSS na ito.

Pag-scroll sa imahe gamit ang mouse wheel

Kailangan mong ipatupad ito sa sandaling gamitin mo ang mouse wheel upang lumipat mula sa isang imahe patungo sa isa pa na may mahusay na animasyon sa paglipat. Spectacular.