35 tunay na nakakaaliw na mga epekto ng imahe ng CSS

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

3d cube

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.

Sumabog na epekto
Kaugnay na artikulo:
35 pang mga CSS text effects para sa iyong website

3D hover effect

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

CSS 3D Panorama

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.

Creativos Online
Kaugnay na artikulo:
27 mahahalagang epekto sa teksto ng CSS para sa palalimbagan ng iyong website

Mga imahe sa "ikiling" na pananaw

Perspective Tilt Imaging

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

Mga blinds ng Venetian

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

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

I-hover ang Larawan ng Epekto

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

Epekto ng salamin 

Espejo

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

Reflex na epekto

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

Ikiling na epekto

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

Hover blur effect

Blur effect

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

Pag-hover ng imahe

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

Mag-hover 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

Epekto ng SVG

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

Nagpapakita ng hover

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

Animasyon ng Hover ng Larawan

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

Pagsubaybay ng imahe

Iba simpleng epekto para sa isang tiyak na layunin.

Pag-zoom ng imahe

Mag-zoom

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

Mag-zoom hover effect

Mag-hover zoom

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

Magnifying glass effect

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 JS

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

Epekto ng overlay ng CSS

umali-aligid

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

Hovy para sa mga larawan

Mga litrato

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

mga linya

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

Paikot na hover

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

umali-aligid

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

I-hover ang 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

Subtítulos

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

Direksyon ng 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

Sukat ng imahe

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

iOS shadow effect na may React

ios anino

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

ios anino

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

Epekto ng paglipat ng imahe

Mga Mosaic

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

balumbon

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

Paglipat

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.


Iwanan ang iyong puna

Ang iyong email address ay hindi nai-publish. Mga kinakailangang patlang ay minarkahan ng *

*

*

  1. Responsable para sa data: Miguel Ángel Gatón
  2. Layunin ng data: Kontrolin ang SPAM, pamamahala ng komento.
  3. Legitimation: Ang iyong pahintulot
  4. Komunikasyon ng data: Ang data ay hindi maiparating sa mga third party maliban sa ligal na obligasyon.
  5. Imbakan ng data: Ang database na naka-host ng Occentus Networks (EU)
  6. Mga Karapatan: Sa anumang oras maaari mong limitahan, mabawi at tanggalin ang iyong impormasyon.

  1.   Sandy Hernandez dijo

    Kamusta. Nagustuhan ko talaga ang mga effects na nai-post mo. Sa pamamagitan ng pagkakataon malalaman mo kung paano ginawa ang epekto kung saan mo inilalagay ang pointer sa isang imahe at gumagalaw ito mula sa ibaba hanggang sa tuktok, mainam para sa pagpapakita ng isang preview ng mga web page. Iniwan ko sa iyo ang isang halimbawa ng kung ano ang ibig kong sabihin, sa seksyong «LATEST WEBSITE JOBS
    »Mula sa selectawebs.com ng website
    Salamat in advance

  2.   Omar dijo

    Mahusay na pahina at post, ito ay naging napaka kapaki-pakinabang sa akin dahil kailangan ko ng ilang mga epekto para sa isang access panel portal sa mga panloob na application. Maraming salamat sa mga ambag na ito.

  3.   roger gabriel dijo

    Mahusay na mga epekto. Nagturo ako sa sarili, palagi kong nagustuhan ang ideya ng pag-unlad ng web ng marami, nais ko ang iyong payo sa kung paano magsimula at kung anong pagkakasunud-sunod upang matuto. regards

  4.   makitid dijo

    Kumusta, salamat sa iyong nilalaman. Ngayon tuklasin ang iyong pahina. Ito ay isang pagtataka. Walang katapusan sa pagbabasa at mga query na maaaring gawin dito. ;)

    1.    Manuel Ramirez dijo

      Hello Natalia! Natutuwa akong nasiyahan ka sa mga pagbabasa dito Creativos Online. Lahat ng pinakamahusay!

  5.   Mendoza dijo

    Hey kamangha-manghang listahan ng mga magagandang epekto, magiging napaka cool na makita kung paano ilapat ang mga ito sa wordpress na may elementor