Imazhi kërcyes kur qëndron pezull mbi një lidhje. Hover html css efekti rri pezull

Ditën e mirë, miq! Ky është një artikull tjetër i shkruar me kërkesë të një prej lexuesve të blogut tim. Sot ne po zbatojmë aftësinë për të shfaqur një imazh kur vendosni miun mbi një lidhje. Pse mund të jetë e nevojshme kjo? Gjithçka është shumë e thjeshtë, në këtë mënyrë ju mund të kurseni hapësirë ​​në faqe dhe në të njëjtën kohë të ringjallni lidhjet.

Siç e dini, zbatoni shfaqen foto e mundur me Ndihmë jQuery, CSS dhe gjithashtu HTML. Në artikullin e sotëm do të postoj kod i gatshëm këtë efekt, dhe gjithashtu japin disa shembuj ilustrues. Çdo skript është mjaft i thjeshtë, i krijuar duke përdorur CSS+HTML. Nuk do t'ju mërzit më dhe do t'ju jap zgjidhje të gatshme!

Imazhi kërcyes në lëvizje

a.site-ssilka:hover+div

Më lejoni të shpjegoj shkurtimisht pikat kryesore. Për të shfaqur një imazh pop-up, duhet t'i referoheni etiketës me atributin src dhe pas shenjës së barabartë në thonjëza, shkruani shtegun për në imazh, pasi e keni ngarkuar më parë në dosje rrënjë faqe.

Etiketë <а> Me parametri i kërkuar href është përgjegjës për krijimin dhe shfaqjen e lidhjes (në shembullin tim ky është tekst).

Nëse elementët e faqes kanë lëvizur, mund të vendosni gjerësinë dhe lartësinë e imazhit duke përdorur veçorinë gjerësia Dhe lartësi. Parametrat përcaktohen në pixel.

Atributi alt lejon motorët e kërkimit të njohin më saktë atë që përshkruhet në një imazh.

Për qartësi më të madhe, unë kam theksuar pjesën e kodit që ka shumë të ngjarë të dëshironi të ndryshoni.

Teksti kërcyes kur qëndron pezull mbi një lidhje

a.site-ssilka:hover+div

Behu i guximshem!!! Drejtoje kursorin drejt meje!

Siç mund ta shihni nga shembulli, kur kaloni pezull mbi tekst, shfaqet një udhëzues teksti.

Imazhi zhduket kur qëndron pezull mbi një lidhje

a.site-ssilka:hover+div

Behu i guximshem!!! Drejtoje kursorin drejt meje!

Për të shtuar një efekt specifik më sipër, thjesht kopjoni kodin që ju përshtatet dhe ngjisni atë redaktori i tekstit. Kështu, një lidhje me një imazh që shfaqet/zhduket mund të shtohet kudo në artikull.

Pika e rëndësishme! Secili prej skripteve të paraqitura nuk dëmton vlefshmërinë e faqes.

Më duket jo më pak e përshtatshme të zbatoj detyrën duke shtuar skenar i veçantë në skedarin e stilit të shabllonit tuaj, i cili zakonisht quhet style.css.

CSS e imazhit kërcyes

pozicioni: i afërm;

miniaturë: rri pezull(

Hapësira e miniaturës( /*CSS për imazhin e zmadhuar*/

pozicioni: absolut;

ngjyra e sfondit: #3d3d3d;

kufiri: 1px e bardhë e fortë;

dukshmëria: e fshehur;

tekst-dekorim: asnjë;

kufiri-radius: 4px 4px 4px 4px;

Moz-border-radius: 4px 4px 4px 4px;

Webkit-border-radius: 4px 4px 4px 4px;

Hapësira e miniaturës img( /*CSS për imazhin e zmadhuar*/

gjerësia e kufirit: 0;

Miniatura: shtrirja e rri pezull ( /*CSS për imazhin e zmadhuar kur rri pezull*/

dukshmëria: e dukshme;

majtas: 60 px; /*pozicioni ku imazhi i zmadhuar duhet të zhvendoset horizontalisht */

Për të shfaqur një dritare kërcyese kur qëndroni pezull mbi një lidhje, futni lidhjen e mëposhtme në tekst:

Përveç kësaj, një lidhje me një imazh pop-up mund të futet në pjesë e caktuar shabllonin tuaj. Për ta bërë këtë, shtoni kodin e mëposhtëm në skedarin index.php. Ky është një skedar që përcakton rregullimin vizual të elementeve të faqes.

Metoda e mësipërme, megjithëse e thjeshtë për t'u zbatuar, ka një pengesë të caktuar. Meqenëse fotografia e dytë ngarkohet vetëm kur kaloni pezull mbi lidhjen, fotografia shfaqet me një pauzë. Për të eliminuar këtë vonesë, mund të përdorni jo dy imazhe, por vetëm një.

Efekt rrotullues me një model

Duket se ka një kontradiktë, sepse efekti i rrotullimit është zëvendësimi i një fotografie me një tjetër, si mund t'ia dalësh atëherë me një foto? Në fakt, do të ketë dy imazhe (Fig. 2), por ato do të ruhen në një skedar grafik.

Oriz. 2. Imazhi me dy foto

Ndryshimi nga një imazh në tjetrin ndodh duke e zhvendosur imazhin vertikalisht duke përdorur sfondin e vetive universale ose pozicionin e sfondit, siç tregohet në shembullin 2.

Shembulli 2: Ndryshimi i pozicionit të figurës

HTML5 CSS 2.1 IE Cr Op Sa Fx

Për përzgjedhësin A, imazhi i sfondit vendoset nëpërmjet veçorisë së sfondit, gjerësia (gjerësia) është e njëjtë me imazhin dhe lartësia (vetia e lartësisë) është e barabartë me gjysmën e lartësisë së figurës. Si rezultat, fillimisht duhet të shfaqet e gjithë skeda e gjelbër.

Pershendetje te dashur miq. Në artikullin e sotëm dua t'ju tregoj se si të krijoni një efekt ku kur vendosni miun mbi një imazh, imazhi origjinal ndryshon në një imazh të rremë.

Ka shumë mundësi për të krijuar një efekt të ngjashëm. Kompleksiteti i efektit do të ndryshojë vetëm në ndërtimin e kodit html dhe krijimin e stileve css.
Unë kam përshkruar tashmë efekte të ngjashme më herët në artikujt e mi, kur fola se si dhe.

Efekti i zhvendosjes së imazhit në këta artikuj arrihet duke krijuar një imazh të vetëm që kombinon pamjen origjinale dhe pamjen e pezullimit. Dhe kontrolli ndodh për shkak të vetive të pozicionimit në stilet css.

Sot do të mësoni se si ta krijoni këtë efekt duke përdorur dy imazhe të ndryshme. Kjo metodë është më e lehtë për t'u zbatuar, pasi nuk keni nevojë të krijoni imazhe të dyfishta paraprakisht. Ju do të jeni në gjendje të zbatoni efektin me imazhe që janë ngarkuar më parë në faqen tuaj.

Ku bazohet efekti i ndryshimit të imazhit?

Thelbi i të gjithë efektit është se dy imazhe vendosen në një bllok DIV. Këtij blloku i caktohet një klasë ose identifikues dhe çdo imazhi gjithashtu i caktohet klasës së vet. Dhe më pas duke përdorur këto klasa, krijohen stile CSS për të ndryshuar një imazh në tjetrin kur rri pezull kursorin e miut. Dhe kjo arrihet falë vetive të transparencës ( errësirë).

Përgatitja e një kornize html për një imazh

Pra, në vendin ku dëshironi të krijoni këtë efekt, duhet të futni këtë kornizë html:

ku ju, natyrisht, ndryshoni gjerësinë, lartësinë dhe lidhjet me imazhet.
Dhe pastaj mund të vazhdoni në krijimin e stileve css.

Krijimi i stileve css

Si shembull i parë, le të marrim këto imazhe:

Unë dua të krijoj një efekt ku buza të shfaqet pas lëvizjes së kursorit të miut.

Së pari unë postoj një skelet html që tregon shtigjet drejt skedarëve dhe madhësitë e tyre:

Për të arritur efektin e dëshiruar, duhet të shtoni stilet e mëposhtme në skedarin e fletës së stileve:

/*Vetitë për kontejnerin*/#img_container (pozicioni:relativ; lartësia:114px; gjerësia:300px; marzhi:0 automatik; kursori: treguesi; ) /*Vetitë për imazhin në kontejner*/#img_container img ( position:absolute; majtas:0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s easy-in-out; -o-transition: opacity 0.5s easy- brenda-jashtë; tranzicioni: errësirë ​​0,5 s lehtësi-në-jashtë;) /*Transparencë 100% kur rri pezull mbi imazh*/#img_container img.img_bottom:hover ( opacity:0; )

Meqë ra fjala, në vetitë e kontejnerit gjerësia dhe lartësia mund të vendosen si përqindje, por në këtë rast marzhi i vetive: 0 auto; humbet rëndësinë e saj. Në përgjithësi, në varësi të vendit ku do të përdorni futjen e imazhit, përdorni vetitë e duhura.

Nëse nuk keni nevojë për një ndryshim të qetë të imazheve, hiqni këto veti ose ndryshoni intervalin:

Webkit-tranzicion: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-tranzicioni: opacity 1s ease-in-out; tranzicioni: errësirë ​​1s lehtësi në dalje;

Në këtë mënyrë të thjeshtë mund të krijoni efektin e ndryshimit të imazhit kur rri pezull kursorin e miut. Vetëm mbani në mend se ju duhet të punoni me çdo imazh. E vetmja gjë është që nëse keni imazhe me të njëjtën madhësi, atëherë mund të regjistroni vetitë css një herë, dhe të gjitha imazhet do të duhet të vendosen në kornizën html të specifikuar më parë.

Tani shikoni video-tutorialin ku unë tregoj se si funksionon ky efekt dhe një variant tjetër i këtij efekti. Kur imazhi ndryshohet me rrotullim.

Kjo është e gjitha, efekti i thjeshtë është gati, vendoseni në shërbim dhe zbatojeni në projektet tuaja. Paç fat! Dhe shihemi në artikuj të rinj.

Dhe këtu është arkivi i premtuar në tutorialin e videos.

Regjistrohu në artikuj të rinj!

Aplikimi i të ndryshmeve efekti hover CSS mbi një imazh, lidhje ose tekst është një nga teknikat më të zakonshme të CSS.

Në këtë artikull, unë kam mbledhur shumë efekte interesante të zhvendosjes së miut CSS3. Mund t'i aplikoni lehtësisht në faqen tuaj të internetit ose në projekte të tjera në internet. Le të shohim se çfarë kam përgatitur për ju.

1. 10 Efekte Stylish Hover

Siç sugjeron edhe emri, ky është një koleksion prej 10 efektesh pezullimi tepër elegant.

Burimi

2. Efekti Hover i vetëdijshëm për drejtimin

Kur kaloni miun mbi elemente të ndryshme, CSS rri pezull efekti hover ndjek kursorin dhe krijon prezantime të mahnitshme 3D.

Burimi

3. Wacom Hover Effect

Ky është tashmë një efekt mjaft i çuditshëm, por shumë njerëz ende kënaqen duke e përdorur atë. Prezantimi është i thjeshtë por tërheqës.

Burimi

4. CSS3 Hover Effects

Nëse jeni duke kërkuar për efekte rrethore hover, do të gjeni disa interesante këtu. Gjithsej 12 në dispozicion CSS të ndryshme efektet e kornizës rri pezull.

Burimi

5. Hover Animation nga UNIQLO

Ky është një tjetër efekt interesant hover. Është ideale për miniaturë ose lloje të tjera imazhesh.

Burimi

6. Efektet e pezullimit të butonave

Këtu janë disa efekte mbresëlënëse pezullimi për butonat. Të gjitha ato janë perfekte për faqet e çdo lloji.

Burimi

7. 10 Efekte mahnitëse Hover

Një grup tjetër prej 10 efektesh CSS për butona. Shumica e tyre janë mjaft mbresëlënëse.

Burimi

8. CSS3 Hover Efektet 2

Ky është një koleksion i përbërë nga katër efekte të ndryshme duke qëndruar pezull mbi imazhin. Emri dhe përshkrimi i efektit shfaqen së bashku me të.

Burimi

9. Bounce on Hover

Ky është një efekt argëtues dhe interesant hover për imazhet. Korniza e rrumbullakët është ideale për t'u aplikuar tek avatarët e anëtarëve të ekipit dhe imazhet e rekomandimeve.

Burimi

10. Hovers 8-bit

Ky efekt elegant vintage CSS do t'ju japë një ndjenjë nostalgjie. Mund ta përdorni për të krijuar stil retro për sitin.

Burimi

11. Efekti i Thjeshtë Hover Titulli

Kur kaloni miun mbi një imazh, ky efekt shfaq titujt në një sfond me errësirë ​​të ulët.

Burimi

12. Efekti Flip Down

Ky është një tjetër i thjeshtë, por shumë CSS e bukur efekti hover kur rri pezull. Kur kaloni miun mbi një imazh, ai shfaq titullin dhe përshkrimin duke përdorur një efekt inteligjent rrëshqitjeje.

Burimi

13. Çmimi i Kuriozitetit

Derisa të vendosni miun mbi imazh, nuk do ta kuptoni bukurinë e këtij efekti. Linjat e rastësishme shndërrohen bukur në një logo dhe më pas lyhet me ngjyra.

Burimi

14. Efekti i hover imazhit

Ky është një efekt i jashtëzakonshëm lëvizës CSS për kornizat e imazhit. Mënyra se si shfaqet një imazh kundër një tjetri është e pabesueshme!

Burimi

15.Animacion Hover

Kur rri pezull mbi imazhin, opaciteti zvogëlohet, duke u fokusuar në lidhje.

Burimi

16. Hover Me Brother

Ky mund të mos jetë një efekt shumë i dobishëm CSS, por është argëtues. Thjesht vendosni miun mbi syze dielli dhe magjia do të fillojë.

Burimi

17. Nautilus SCSS HAML Hover Effects

Ky është një efekt kreativ hover i disponueshëm në disa variacione. Ata ofrojnë mundësi unike për dizajnimin e imazheve.

Burimi

18. Efekti i pezullimit të kufirit SVG 1

I përshtatshëm për tekst, butona ose imazhe. Rikrijimi gradual i kornizës është një efekt vërtet interesant.

Burimi

19. Hover ikonën e Hartës së Kërkimit

A keni nevojë për një efekt të pezullimit të CSS për të lëvizur për shiritin tuaj të kërkimit ose ikonën e hartës? Ky është pikërisht ai. Transformimet e tij pa probleme janë kënaqësi e plotë për sytë.

Burimi

20. Paneli i ikonave sociale

Ky efekt pezullimi mund të aplikohet për të fshehur ikonat në fillim mediat sociale, dhe më pas shfaqini ato kur përdoruesi vendos miun mbi to.

Burimi

21. Informacion mbi Shtesat e artikullit të produktit

Kjo mënyrë e shkëlqyer duke siguruar informacion shtese në lidhje me produktet në dyqanin online. Kur rri pezull mbi një imazh produkti duke përdorur efekt i bukur shfaqet informacioni për të.

Burimi

22. Zarf i animuar

Efekti i përsosur i pezullimit të CSS në pezullimin për "seksionin" Lidhu me ne". Ajo shfaq informacion kontakti në një zarf që shfaqet, por vetëm pasi përdoruesi të rri pezull mbi imazhin.

Burimi

23. Kthehu në krye

Ky efekt unik i pezullimit për butonin "Kthehu në krye" ju lejon t'u ofroni vizitorëve tuaj një tregues të bukur dhe të animuar.

Burimi

24. Fancy Hover

Kur kaloni miun mbi një imazh, ai jo vetëm që zmadhohet, por ndryshon edhe mënyrën se si shfaqet.

Burimi

25. Reminders Icon Efekti Hover

Ky efekt pezullimi CSS shton stile të bukura në imazh.

Burimi

26. Rrotullimi i imazhit rrethor

Efekti i pezullimit për imazhet rrethore. Ekzistojnë katër stile të ndryshme të efekteve hover në koleksion.

Burimi

27. Safari Icon Hover Effect

Ky efekt i pezullimit CSS rikrijon animacionin e ikonës Safari në lëvizje. Mund ta zëvendësoni ikonën imazhin e vet ose logo.

) zakonisht ndryshon pamjen (bëhet në fokus). Më shpesh ky është një ndryshim i thjeshtë në ngjyrë ose duke shtuar një nënvizim. Kursori në dorë gjithashtu ndryshon. Në këtë artikull do të hedhim një vështrim më të afërt se si të zbatojmë bukur ndryshimin e stilit të një lidhjeje në hover.

Shembuj me ndryshimin e pamjes së një lidhjeje në hover

Shembulli 1: Si të ndryshoni ngjyrën dhe nënvizoni në hover

Kur rri pezull, lidhja do të bëhet e kuqe dhe e nënvizuar: lidhje

Shembulli 2: Si të ndryshoni sfondin e një lidhjeje në hover

Kur rri pezull, lidhja do të ndryshojë sfondin e saj në blu dhe ngjyra e lidhjes do të bëhet e bardhë: lidhje

Konvertohet në sa vijon në faqe:

Shembulli 3. Si të ndryshoni kursorin kur qëndroni pezull mbi një lidhje

Si parazgjedhje, lidhjet kanë një vlerë të kursorit hover të kursorit :pointer. Në shembullin tjetër do ta ndryshojmë atë në diçka tjetër.

Kur rri pezull, lidhja do të bëhet e kuqe dhe e nënvizuar dhe kursori do të bëhet një shenjë plus: lidhje

Konvertohet në sa vijon në faqe:

Shembulli 4: Ndryshime të buta të stilit të lidhjes

Duke përdorur veçorinë e tranzicionit, ne do të zbusim shpejtësinë me të cilën ndryshon ngjyra e sfondit dhe e lidhjes.

Kur rri pezull, lidhja do të ndryshojë sfondin e saj në blu dhe ngjyra e lidhjes do të bëhet e bardhë, me të gjithë të zbutur: lidhje

Konvertohet në sa vijon në faqe:

Shembulli 5. Nënvizim i bukur i lidhjes

Kur rri pezull, lidhja do të ndryshojë ngjyrën dhe do të shfaqet një nënvizim i pazakontë: lidhje

Konverton në faqe në vijim.