Hover html css efekti rri pezull

Përshëndetje të dashur lexues të blogut webcodius! Shpesh kam pyetje: si të ndryshosh një imazh në një faqe interneti kur vendos kursorin e miut mbi të. Ky efekt gjendet në shumë sajte dhe shembulli më i thjeshtë është kur rri pezull mbi një buton dhe më pas ai ndryshon ngjyrën. Ndonjëherë JavaScript përdoret për të krijuar këtë efekt, por zakonisht mjafton vetëm CSS, veçanërisht që nga lëshimi i versionit 3 të CSS. Më vonë në artikull do të tregoj si të ndryshoni imazhin kur rri pezull miun mbi duke përdorur vetëm një CSS, do të shikoj disa metoda dhe efekte të ndryshme.

Efektet e ndryshimit të një elementi të faqes së internetit në lëvizjen e mausit shpesh quhen efektet hover. Kjo për faktin se kur zbatohen efekte të tilla, përdoret, i cili përcakton stilin e elementit kur kursori i miut rri pezull mbi të.

Së pari, le të shohim një opsion më të thjeshtë. Le të themi se keni një imazh të futur në faqen tuaj, siç tregohet më poshtë:

Dhe le të themi se duhet të ndryshoni ekranin e tij kur vendosni kursorin e miut mbi të. Kur futni këtë imazh në etiketën img, shtoni atributin class="animate1", më pas kodi html i imazhit do të duket diçka si kjo:

Për të filluar, thjesht mund ta bëni imazhin transparent kur rri pezull kursorin. Transparenca në CSS kontrollohet nga vetia e opacity, e cila është specifike për CSS3. Vlera e përdorur është numra thyesorë nga 0 në 1, ku zero korrespondon me transparencën e plotë, dhe një, përkundrazi, korrespondon me patejdukshmërinë e objektit. Për versionet më të vjetra të Internet Explorer, do t'ju duhet të përdorni veçorinë e filtrit me vlerën alfa(Opacity=X) pasi ato nuk e mbështesin vetinë e opacity. Në vend të X, do t'ju duhet të zëvendësoni një numër nga 0 në 100, ku 0 do të thotë transparencë e plotë dhe 100 do të thotë paqartësi e plotë.

Më pas, për ta bërë imazhin transparent kur rri pezull mbi skedarin e stilit ose midis etiketave Dhe html ju duhet të shtoni kodin e mëposhtëm css:

Në rast se nuk e kuptoni CSS, hyrja img.animate1:hover i tregon shfletuesit se për të gjithë elementët , duke pasur një atribut të klasës të barabartë me animate1 kur rri pezull mbi to me kursorin e miut, aplikoni stilet e specifikuara. Dhe stilet janë të specifikuara midis mbajtëseve kaçurrelë ( dhe ). Nëse keni bërë gjithçka siç duhet, duhet të duket diçka si kjo:

Mund ta bëni imazhin të tejdukshëm në gjendjen e tij fillestare, por ta bëni atë të errët kur rri pezull mbi të. Pastaj duhet të shtoni linjat e mëposhtme në skedarin CSS:

img.animate1 (
filtri: alfa (Opacity=25);
opaciteti: 0,25;
}
img.animate1:hover (

errësirë: 1;
}

Rezultati do të jetë si ky:

Për efekt më të madh, mund të ngadalësoni ndryshimet në transparencën e figurës. Për ta bërë këtë, mund të përdorni veçorinë e tranzicionit CSS, e cila përcakton efektin e tranzicionit midis dy gjendjeve të një elementi. Le të shtojmë një sekondë të ngadalësimit si shembull. Atëherë kodi ynë CSS do të duket si ky:

img.animate1 (
filtri: alfa (Opacity=25);
opaciteti: 0,25;
-moz-tranzicion: të gjitha 1-të ease-in-out; /* efekti i tranzicionit për Firefox deri në versionin 16.0 */
-webkit-tranzicion: të gjitha 1-të ease-in-out; /* efekti i tranzicionit për Chrome deri në versionin 26.0, Safari, Android dhe iOS */
-o-tranzicion: të gjitha 1-të lehtësi-në-jashtë; /* efekti i tranzicionit për Opera deri në versionin 12.10 */
tranzicioni: të gjitha 1-të lehtësisht-në-jashtë; /* efekti i tranzicionit për shfletues të tjerë */
}
img.animate1:hover (
filtri: alfa (Opacity=100);
errësirë: 1;
}

Rezultati:

Duke përdorur vetinë e transformimit, imazhi mund të shkallëzohet, rrotullohet, zhvendoset ose anohet. Le të përpiqemi të zmadhojmë figurën. Atëherë kodi css do të jetë si ky:

img.animate1(


— o-tranzicioni: të gjitha 1-të lehtësi;
tranzicioni: lehtësia e të gjitha 1-ve;
}
img.animate1:hover(
- moz-transform: shkalla (1.5); /* efekti i transformimit për Firefox deri në versionin 16.0 */
- webkit-transform: shkalla (1.5); /* efekti i transformimit për Chrome përpara versionit 26.0, Safari, Android dhe iOS */
- o-transformimi: shkalla (1.5); /* efekti i transformimit për Opera deri në versionin 12.10 */
— ms-transformimi: shkalla (1.5); /* efekti i transformimit për IE 9.0 */
transform:shkallë(1.5); /* efekti i transformimit për shfletues të tjerë */
}

Dhe rezultati do të jetë si ky:

Mund të shtoni rrotullim për të zmadhuar figurën. Pastaj stilet css ndryshojnë pak:

img.animate1(
— moz-tranzicioni: të gjitha 1s lehtësi;
- uebkit-tranzicion: të gjitha 1-të lehtësi;
— o-tranzicioni: të gjitha 1-të lehtësi;
tranzicioni: lehtësia e të gjitha 1-ve;
}
img.animate1:hover(
- moz-transform: shkalla rrotulluese (360 gradë) (1.5);
- webkit-transform: rrotullimi (360 gradë) shkalla (1.5);
- o-transformimi: shkalla rrotulluese (360 gradë) (1.5);
- ms-transformimi: shkalla rrotulluese (360 gradë) (1.5);
transformimi: rrotullimi (360 gradë) shkalla (1.5);
}

Rezultati:

Më sipër kemi parë rastet kur një fotografi është përfshirë në animacion. Më tej do të shqyrtojmë mënyra për të zëvendësuar një imazh me një tjetër. Në këtë rast, zakonisht përgatiten dy imazhe me të njëjtën madhësi: njëra për pamjen origjinale, tjetra për zëvendësimin e saj.

Le të themi se kemi dy fotografi, një bardh e zi dhe tjetra me ngjyrë:

Le ta bëjmë atë në mënyrë që kur të vendosësh kursorin mbi një imazh bardh e zi, të shfaqet një ngjyrë. Për ta bërë këtë, bëni imazhin origjinal sfondin e elementit div duke përdorur veçorinë e sfondit. Dhe kur kaloni kursorin mbi imazh, ne do ta ndryshojmë imazhin e sfondit duke përdorur të njëjtën pseudo-klasë të pezullimit dhe veçorinë e sfondit. Për të zbatuar këtë efekt, shtoni një element div me klasën rotate1 në faqen html:

Dhe shtoni përshkrimet e mëposhtme të stilit:

div.rotate1(
sfond: url (img/2.jpg); /* Rruga drejt skedarit me imazhin burim */
gjerësia: 480 px; /* Gjerësia e imazhit */
lartësia: 360 px; /* Lartësia e imazhit */
}
div.rotate1:hover (
sfond: url (img/1.jpg); /* Rruga drejt skedarit me imazhin që do të zëvendësohet */
}

Dhe rezultati:

Kjo metodë ka një pengesë të rëndësishme. Meqenëse fotografia e dytë ngarkohet vetëm kur kursori është pezulluar, nëse përdoruesi ka një lidhje të ngadaltë në internet dhe madhësia e skedarit të figurës është e madhe, fotografia do të shfaqet me një pauzë. Prandaj, më poshtë do të shqyrtojmë disa mënyra të tjera për të zëvendësuar imazhet kur rri pezull kursorin e miut.

Metoda tjetër do të bazohet në kombinimin e dy imazheve në një skedar. Le të themi se duhet të vendosim një buton në një faqe që, kur kursori i miut rri pezull mbi të, ndryshon pamjen e tij. Për ta bërë këtë, kombinoni dy imazhet në një skedar dhe imazhi që rezulton do të duket diçka si kjo:

Në këtë rast, ndryshimi nga një imazh në tjetrin do të bëhet duke zhvendosur imazhin e sfondit vertikalisht duke përdorur veçorinë background-position. Meqenëse klikimi mbi një buton zakonisht çon në një faqe tjetër, ne do të fusim imazhin në element< a>. Pastaj futni kodin e mëposhtëm në faqen html:

Dhe skedari css është si ky:

a.rrotulloj2 (
sfond: url (img/button.png); /* Rruga drejt skedarit me imazhin burim */
shfaqja: bllok; /* Lidhja si element blloku */
gjerësia: 50 px; /* Gjerësia e imazhit në piksel */
lartësia: 30 px; /* Lartësia e imazhit */
}
a.rotate2:hover (
pozicioni i sfondit: 0 -30 px; /* Kompensimi i sfondit */
}

Rezultati:

Dhe metoda e fundit për sot është kur një imazh vendoset nën një tjetër duke përdorur pozicionin e rregullit CSS: absolute . Në këtë rast, ne vendosim dy imazhe në kontejnerin div:

Dhe shtoni stilet css:

Animate 2(
pozicioni: i afërm;
margin: 0 automatik;/* vendos bllokun e div në qendër të faqes */
gjerësia: 480 px; /* Gjerësia */
lartësia: 360 px; /* Lartësia */
}
.animate2 img (
pozicioni:absolut; /* pozicionimi absolut*/
majtas: 0; /* rreshtoni imazhet në këndin e sipërm të majtë të div*/
krye: 0; /* rreshtoni imazhet në këndin e sipërm të majtë të div */
}

Pas shtimit të rregullave css, fotografitë do të vendosen njëra poshtë tjetrës. Tani, duke kontrolluar transparencën e fotove duke përdorur veçorinë e opacity, në gjendje normale do të tregojmë foton e dytë, dhe kur rri pezull kursorin, të parën. Për ta bërë këtë, në gjendje normale, ne e bëjmë fotografinë me klasën e parë plotësisht transparente, dhe kur rri pezull kursorin, anasjelltas: fotografia me klasën e dytë do të jetë plotësisht transparente, por me klasën e parë nuk do të jetë transparente. :

Animate2 img.first ( /* imazhi i parë është plotësisht transparent */
opaciteti: 0;
filtri:alfa (opacity=0);
}
.animate2:hover img.first ( /* kur rri pezull kursorin, imazhi i parë bëhet i errët */
tejdukshmëria: 1;
filtri:alfa (opacity=100);
}
/* dhe e dyta bëhet transparente kur rri pezull kursorin */
opaciteti: 0;
filtri:alfa (opacity=0);
}

Rezultati:

Mund të arrini një tranzicion të qetë duke shtuar vetinë e tranzicionit CSS në rregullin e fundit:

Animate2:hover img.second, .animate2 img.second:hover (
opaciteti: 0;
filtri:alfa (opacity=0);
-moz-tranzicioni: të gjitha 2s lehtësi;
-webkit-tranzicioni: të gjitha 2s lehtësi;
-o-tranzicioni: të gjitha 2s lehtësi;
tranzicioni: të gjitha 2s lehtësi;
}

Dhe rezultati:

Dhe nëse shtoni vetinë e transformimit:

Animate2:hover img.second, .animate2 img.second:hover (
opaciteti: 0;
filtri:alfa (opacity=0);
-moz-transform:shkallë(0, 1);
-webkit-transform:scale(0, 1);
-o-transformoj:shkallë(0, 1);
-ms-transformimi:shkalla (0, 1);
transform:shkallë(0, 1); /* zvogëloni gjerësinë e imazhit në 0 */
}

Do të dalë kështu:

Duke kombinuar veti të ndryshme CSS mund të arrini të ndryshme Efektet e pezullimit kur ndryshoni fotot ndërsa rri pezull kursorin e miut. Këto dhe shembuj të tjerë i kam vendosur në këtë faqe, ku mund të shkarkoni edhe burimet. Kjo është e gjitha, shihemi përsëri.

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 fotot pop-up ju mund të përdorni jQuery, CSS dhe HTML. Në artikullin e sotëm do të postoj kodin e përfunduar për këtë efekt, dhe gjithashtu do të jap disa shembuj vizualë. Ç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 fillimisht në dosjen rrënjë të faqes.

Etiketë <а> me parametrin e 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ë lart, thjesht kopjoni kodin që ju përshtatet dhe ngjisni atë në një redaktues teksti. 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 për të zbatuar detyrën duke shtuar një skrip të veçantë në skedarin e stileve 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ë një pjesë specifike të shabllonit 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.