Cum să estompezi imaginile la trecerea mouse-ului în WordPress (Simplu și ușor)

Ați dorit vreodată să adăugați un pic de strălucire imaginilor de pe site-ul dvs.? Vorbim despre o notă mică, profesională, care face ca site-ul dvs. să pară mai interactiv, fără a fi deranjant.

La WPBeginner, am constatat că un simplu efect de estompare la mouseover este o soluție perfectă. Este o animație subtilă care încurajează ușor vizitatorii să interacționeze cu conținutul dvs. vizual.

Această mică ajustare poate face o mare diferență în senzația generală a site-ului dvs. și este surprinzător de ușor de configurat. Nu aveți nevoie să fiți un expert în codare pentru a o realiza.

În acest ghid, vă vom arăta exact cum să adăugați efectul de estompare a imaginii la trecerea mouse-ului în WordPress.

De ce să estompezi imaginile la trecerea mouse-ului peste ele în WordPress?

Animațiile sunt o modalitate ușoară de a face site-ul dvs. mai interesant și pot chiar atrage atenția vizitatorului asupra celor mai importante conținuturi ale paginii dvs., cum ar fi logo-ul site-ului sau un apel la acțiune.

Există multe moduri diferite de a utiliza animații CSS în WordPress, dar adăugarea unui efect de hover la imagini este deosebit de eficientă. Animația de estompare înseamnă că imaginile dvs. vor apărea sau vor dispărea lent atunci când vizitatorii trec cu mouse-ul peste ele.

Acest lucru încurajează oamenii să interacționeze cu imaginile dvs. și poate chiar adăuga un element narativ paginii. De exemplu, imagini diferite se pot estompa și ieși pe măsură ce vizitatorul se deplasează pe pagină.

Spre deosebire de alte animații, efectul de estompare a imaginii la trecerea mouse-ului peste ea este subtil, deci nu va afecta negativ experiența de citire a vizitatorului sau orice optimizare a imaginilor pe care ați făcut-o.

Acestea fiind spuse, haideți să vă arătăm cum să adăugați o estompare imaginilor dvs. la trecerea mouse-ului în WordPress. Pur și simplu folosiți legăturile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați:

• Metoda 1: Adăugarea estompării imaginilor la trecerea mouse-ului peste toate imaginile WordPress
• Metoda 2: Adăugarea animațiilor de estompare a imaginilor la pagini individuale
• Metoda 3: Adăugarea animațiilor de estompare a imaginilor la imaginile de prezentare
• Întrebări frecvente (FAQ)
• Resurse suplimentare pentru efecte și gestionarea imaginilor

Metoda 1: Adăugarea estompării imaginilor la trecerea mouse-ului peste toate imaginile WordPress

Cel mai simplu mod de a adăuga un efect de estompare la toate imaginile dvs. este prin utilizarea pluginului gratuit WPCode. Este cel mai puternic și ușor de utilizat plugin pentru fragmente de cod pentru WordPress și vă permite să adăugați cod personalizat fără a fi nevoie să editați fișierele temei dvs.

Acest lucru este mult mai sigur, deoarece pluginul ajută la prevenirea erorilor care pot cauza erori comune WordPress. Pentru mai multe detalii despre toate funcționalitățile sale, puteți citi recenzia noastră completă despre WPCode.

Sfat expert: La WPBeginner, folosim WPCode pentru a gestiona toate fragmentele de cod personalizate pe portofoliul nostru de site-uri web. Este o modalitate fiabilă pentru noi de a adăuga funcționalitate și de a face ajustări în siguranță, fără a edita direct fișierul functions.php al unei teme.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul gratuit WPCode. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalezi un plugin WordPress.

După activare, accesați Fragmente de cod » Adăugare fragment.

Aici, veți vedea toate fragmentele WPCode gata făcute pe care le puteți adăuga pe site-ul dvs. Acestea includ un fragment care vă permite să dezactivați complet comentariile, să încărcați tipuri de fișiere pe care WordPress nu le suportă de obicei, să dezactivați paginile de atașament, și multe altele.

Pur și simplu plasează mouse-ul peste „Add Your Custom Code” și apoi dă clic pe „+ Add Custom Snippet” atunci când apare.

Pentru a adăuga CSS personalizat în WordPress, trebuie să selectați „Fragment CSS” ca tip de cod din lista de opțiuni care apar pe ecran.

Apoi, pe pagina următoare, introduceți un titlu pentru fragmentul de cod personalizat.

Acesta poate fi orice lucru care vă ajută să identificați fragmentul în tabloul de bord WordPress.

În editorul de cod, adăugați următorul fragment de cod:

img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Acest fragment de cod va estompa fiecare imagine timp de 2 secunde atunci când utilizatorul trece mouse-ul peste ea. Pentru a face imaginea să se estompeze mai lent, înlocuiește pur și simplu „2s ease” cu un număr mai mare. Dacă vrei să faci imaginea să se estompeze mai repede, folosește „1s ease” sau mai mic.

Puteți, de asemenea, să faceți „opacitatea” mai mare sau mai mică prin modificarea liniei opacity:0.6.

Dacă schimbi oricare dintre aceste numere, asigură-te că le schimbi în toate proprietățile (webkit, moz, ms și o) pentru ca efectul de estompare să arate la fel pe fiecare browser.

Când sunteți mulțumit de fragment, derulați la secțiunea „Inserare”. WPCode poate adăuga codul dvs. în diferite locații, cum ar fi după fiecare postare, doar pe frontend sau doar în administrator.

Pentru a adăuga un efect de estompare tuturor imaginilor dvs., faceți clic pe „Inserare automată” dacă nu este deja selectat. Apoi, deschideți meniul derulant „Locație” și alegeți „Antetul site-ului”.

După aceea, sunteți gata să derulați în partea de sus a ecranului și să faceți clic pe comutatorul „Inactive” pentru ca acesta să devină „Active”.

În cele din urmă, faceți clic pe „Salvează fragmentul” pentru a face fragmentul CSS live.

Acum, dacă plasați mouse-ul peste orice imagine de pe site-ul dvs. WordPress, veți vedea efectul de estompare în acțiune.

Metoda 2: Adăugarea animațiilor de estompare a imaginilor la pagini individuale

Utilizarea unui efect de estompare pentru fiecare imagine poate deveni deranjantă, mai ales dacă aveți o galerie foto pe site-ul dvs., un magazin de imagini de stoc sau orice alt site care are multe imagini.

Având în vedere acest lucru, s-ar putea să doriți să utilizați efecte de estompare doar pe o anumită pagină sau postare.

Vestea bună este că WPCode vă permite să creați shortcode-uri personalizate. Puteți plasa acest shortcode pe orice pagină, iar WordPress va afișa efecte de estompare doar pe acea pagină.

Pentru a face acest lucru, pur și simplu creați un fragment de cod personalizat și adăugați codul animației de estompare urmând același proces descris mai sus. Apoi, faceți clic pe butonul „Salvează fragmentul”.

După aceea, derulați la secțiunea „Inserare”, dar de data aceasta selectați „Shortcode”.

Acest lucru creează un shortcode pe care îl puteți adăuga la orice pagină, postare sau zonă pregătită pentru widget.

După aceea, continuați și activați fragmentul urmând același proces descris mai sus.

Acum puteți accesa orice pagină, postare sau zonă pregătită pentru widget și puteți crea un nou bloc „Shortcode”. Apoi, pur și simplu lipiți shortcode-ul WPCode în acel bloc.

Pentru mai multe informații despre cum să plasați shortcode-ul, vă rugăm să consultați ghidul nostru despre cum să adăugați un shortcode în WordPress.

Cu asta făcut, faceți clic pe butonul „Actualizare” sau „Publicare” pentru a face shortcode-ul live. Puteți apoi vizita acea pagină, pagină sau zonă pregătită pentru widget pentru a vedea efectul de estompare la trecerea mouse-ului.

Metoda 3: Adăugarea animațiilor de estompare a imaginilor la Imaginile de prezentare

O altă opțiune este să adăugați animații de estompare la imaginile de prezentare sau miniaturile postărilor. Acestea sunt imaginile principale ale postării.

Prin estomparea imaginilor de prezentare la trecerea mouse-ului, puteți face site-ul dvs. mai atrăgător și mai captivant, fără a anima fiecare imagine de pe blogul dvs. WordPress sau site-ul web.

Pentru a adăuga o animație de estompare la miniaturile postărilor dvs., creați pur și simplu un nou fragment de cod personalizat urmând același proces descris mai sus.

Cu toate acestea, de data aceasta, adaugă următorul cod în editor:

img.wp-post-image:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

După aceea, derulați în jos la caseta „Inserare” și selectați „Inserare automată”.

Apoi, deschideți meniul derulant „Locație” și alegeți „Antet la nivel de site”.

După aceea, puteți continua și puteți face ca fragmentul de cod să fie activ folosind același proces descris mai sus.

Acum, puteți trece cu mouse-ul peste orice imagine de prezentare pentru a vedea animația de estompare în acțiune.

Dacă doriți să adăugați și mai multe efecte de mouseover pe imagini, consultați ghidul nostru despre cum să adăugați efecte de hover pe imagini în WordPress.

Întrebări frecvente (FAQ)

Iată răspunsuri la unele dintre cele mai frecvente întrebări pe care le primim despre adăugarea efectelor de hover pe imagini în WordPress.

Va încetini site-ul meu web adăugarea unui efect de estompare?

Nu, acest efect de estompare bazat pe CSS nu ar trebui să încetinească vizibil site-ul dvs. web. Codul folosește tranziții CSS simple, care sunt foarte ușoare și optimizate de browserele web moderne.

Această metodă este mult mai eficientă decât utilizarea JavaScript sau a bibliotecilor mari de animații pentru un efect atât de simplu.

Cum aplic efectul de estompare unei singure imagini specifice?

Pentru a viza o singură imagine, îi puteți atribui o clasă CSS personalizată. Mai întâi, selectați blocul de imagine în editor și găsiți panoul „Avansat” din setările blocului din dreapta.

În câmpul „Clase CSS suplimentare”, adăugați un nume unic, cum ar fi custom-fade-image. Apoi, modificați fragmentul WPCode pentru a viza în mod specific această clasă, astfel:
img.custom-fade-image:hover { ... }.

Efectul de estompare a imaginii la hover funcționează pe dispozitive mobile?

Acțiunea „mouseover” sau „hover” este specifică utilizatorilor desktop cu un cursor de mouse. Acest efect nu se va declanșa pe dispozitivele tactile, cum ar fi smartphone-urile sau tabletele, deoarece nu există un cursor pentru a pluti peste imagini.

Cu toate acestea, codul nu va cauza probleme pe mobil. Imaginile tale vor fi afișate pur și simplu normal, fără animația de estompare.

Pot folosi alte efecte de animație în afară de estompare?

Da, absolut. Estomparea este doar una dintre multele posibilități pe care le puteți realiza cu CSS.

Puteți crea efecte precum zoom, glisare, tonuri de gri sau puteți aplica suprapuneri. Pentru mai multe idei și exemple de cod, consultați ghidul nostru detaliat despre cum să adăugați efecte de hover pentru imagini în WordPress.

Resurse suplimentare pentru efecte și gestionarea imaginilor

O simplă estompare este un început excelent, dar există multe alte modalități de a face imaginile dvs. mai captivante. Dacă doriți să explorați opțiuni mai avansate, iată câteva dintre celelalte ghiduri ale noastre despre efecte și gestionarea imaginilor:

• Cum să adaugi filtre foto ca pe Instagram în WordPress (Pas cu Pas)
• Cum să afișezi o fotografie înainte și după în WordPress (cu efect de glisare)
• Cum să adăugați protecție la clic dreapta pe imaginile WordPress
• Cum să creați imagini interactive în WordPress
• Cum să adaugi cu ușurință imagini interactive la 360 de grade în WordPress

Sperăm că acest articol v-a ajutat să învățați cum să estompați imaginile la hover în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să organizați fișierele WordPress în folderele bibliotecii media și selecțiile noastre experte de cele mai bune pluginuri și instrumente pentru imagini de prezentare pentru WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.