Cum să schimbați o imagine pe Hover cu Divi

Să știi cum să schimbi o imagine pe hover poate fi util pentru orice tip de site web la care lucrezi. În plus, vă ajută să adăugați interacțiuni subtile la pagini. Puteți, de exemplu, să-l utilizați pentru a oferi o perspectivă suplimentară mărturiilor, despre paginile și paginile echipei. Cu noile opțiuni ale hover-ului Divi, puteți schimba o imagine pe hover folosind doar opțiunile încorporate. Combinând fundalurile coloanelor și filtrul de opacitate, veți ajunge acolo în cel mai scurt timp.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra celor patru exemple pe care le vom recrea de la zero

Pași generali

Adăugați o secțiune nouă

În prima parte a acestui tutorial, vom parcurge câțiva pași generali. Acești pași generali ne vor ajuta să economisim timp atunci când ne concentrăm asupra primelor trei exemple. Deschideți o pagină nouă sau existentă și adăugați o secțiune obișnuită la ea.

Adăugați un rând nou

Structura coloanei

Apoi, adăugați un rând nou folosind următoarea structură de coloane:

Coloana 1 Imagine de fundal

Fără a adăuga încă module, deschideți setările rândului și adăugați o imagine de fundal în prima coloană. Alegeți imaginea pe care doriți să apară cu mouse-ul.

• Coloana 1 Repetarea imaginii de fundal: Fără repetare

Adăugați o imagine în coloana 1

Incarca imaginea

Continuați adăugând un modul de imagine în prima coloană și încărcați imaginea pe care doriți să o afișați înainte de a trece cu mouse-ul.

Adăugați modulul de text al titlului în coloana 2

Adauga continut

În a doua coloană, vom avea nevoie mai întâi de un titlu Modul text. Continuați și adăugați conținut H3.

Setări text antet

Apoi, accesați setările pentru textul antetului și efectuați câteva modificări.

• Rubrica 3 Font: Baloo Tamma
• Rubrica 3 Culoarea textului: # eda96a
• Titlul 3 Dimensiune text: 100 px (desktop), 70 px (tabletă), 50 px (telefon)
• Rubrica 3 Spațierea literelor: -4px

• Rubrica 3 Umbră text Lungime orizontală: 0,04em
• Titlul 3 Text Shadow Vertical Length: 0.04em
• Rubrica 3 Culoare umbră text: rgba (0,0,0,0,6)

Spațiere

În cele din urmă, adăugați o marjă superioară în setările de spațiere.

• Marja superioară: 100 px (desktop), 50 px (tabletă și telefon)

Adăugați modulul divizor în coloana 2

Arată divizorul

Adăugați un modul divizor chiar sub titlul Modul text în coloana 2.

• Show Divider: Da

Culoare divizor

Schimbați apoi culoarea separatorului.

• Culoare divizor: # e25300

Stiluri

Și selectați un alt stil divizor în setările stilurilor.

• Stil divizor: punctat

Dimensionare

Măriți greutatea separatorului și în setările de dimensionare.

• Greutatea divizorului: 3 px

Adăugați modulul de text al corpului în coloana 2

Adauga continut

Până la ultimul modul! Adăugați un modul de text al corpului la a doua coloană cu un anumit conținut la alegere.

Setări text

Schimbați apoi setările de text.

• Dimensiune text: 16 px
• Înălțimea liniei textului: 2.3em
• Orientare text: justificați

Clonați secțiunea de două ori

După ce ați terminat toți pașii generali, clonați secțiunea pe care ați construit-o de două ori. Acum, vom avea o secțiune separată pentru fiecare dintre primele trei exemple.

Creați Exemplul nr. 1

Aplicați setări suplimentare la modulul de imagine

Opacitate implicită

Să începem să creăm primul exemplu! Singurul lucru pe care îl vom face aici este crearea tranziției cu mouse-ul, fără efecte suplimentare. Pentru aceasta, deschideți modulul de imagine și accesați setările filtrelor. Asigurați-vă că valoarea implicită a opacității este de 100%.

• Opacitate: 100%

Plasați cursorul peste opacitate

Schimbați opacitatea la plecare.

• Opacitate: 0%

Tranziții

În cele din urmă, creați o tranziție lină prin creșterea duratei tranziției.

• Durata tranziției: 1200 ms

Creați Exemplul # 2

Aplicați setări suplimentare la modulul de imagine

Spațiere implicită

Trecem la al doilea exemplu! Deschideți modulul de imagine din coloana 1 și asigurați-vă că nu există o umplutură personalizată implicită acolo.

Distanța cu mouse-ul

Continuați prin adăugarea unor umpluturi de fund pe hover pentru a permite imaginii de pe hover să crească în dimensiune.

• Căptușeală inferioară: 100 px

Box Shadow

Adăugăm, de asemenea, o umbră de casetă implicită, care va dispărea la plimbare.

• Poziție orizontală a umbrei cutiei: -55px
• Box Shadow Vertical Position: -50px
• Puterea răspândirii umbrei cutiei: -10px
• Culoare umbră: # eda96a

Opacitate implicită

Apoi, accesați setările filtrelor și asigurați-vă că opacitatea implicită este 100%.

• Opacitate: 100%

Plasați cursorul peste opacitate

Eliminați opacitatea modulului la cursor. Acest lucru va permite ca fundalul coloanei să apară și să creeze efectul „imagine în cursă”.

• Opacitate: 0%

Tranziții

În cele din urmă, creșteți durata tranziției în setările de tranziție ale modulului de imagine.

• Durata tranziției: 1200 ms

Creați Exemplul nr. 3

Adăugați fundal de gradient în coloana 1

Pentru al treilea exemplu, începem deschizând setările rândurilor și adăugând un fundal de gradient radial în prima coloană. Aceasta va conferi imaginii de pe hover o formă circulară.

• Culoare 1: rgba (43.135.218,0)
• Culoare 2: #ffffff
• Coloana 1 Tip de gradient: Radial
• Coloana 1 Direcție radială: Centru
• Coloana 1 Poziție inițială: 60%
• Coloana 1 Poziție finală: 60%

Aplicați setări suplimentare la modulul de imagine

Opacitate implicită

Continuați deschizând modulul de imagine din coloana 1 și asigurându-vă că opacitatea implicită este 100%.

• Opacitate: 100%

Plasați cursorul peste opacitate

Eliminați toată opacitatea la trecerea cu mouse-ul pentru a permite afișarea fundalului coloanei.

• Opacitate: 0%

Creați Exemplul # 4

Adăugați un rând nou

Structura coloanei

Trecem la ultimul exemplu! Aici, vom avea nevoie de un nou rând cu 6 coloane.

Coloana 1 Imagine de fundal

Fără a adăuga încă module, deschideți setările rândului și adăugați imaginea de fundal pe care doriți să o afișați cu mouse-ul ca imagine de fundal a coloanei 1.

• Coloana 1 Repetarea imaginii de fundal: Fără repetare

Repetați pentru toate coloanele din rând

Repetați pasul anterior pentru fiecare dintre coloanele din rândul dvs.

Dimensionare

Apoi, accesați setările de dimensionare ale rândului și eliminați tot spațiul dintre coloane.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea canalului personalizat: 1

Adăugați modulul de imagine în coloana 1

Incarca imaginea

Continuați adăugând un modul de imagine în prima coloană și încărcând imaginea pe care doriți să o afișați în mod implicit.

Opacitate implicită

Asigurați-vă că opacitatea implicită a acestui modul este de 100%.

• Opacitate: 100%

Plasați cursorul peste opacitate

Și eliminați opacitatea în cursă pentru a permite afișarea fundalului coloanei.

• Opacitate: 0%

Tranziții

Măriți durata tranziției pentru o tranziție lină.

• Durata tranziției: 800 ms

Clonați modulul de imagine de 3 ori și plasați duplicatele în coloanele rămase

După ce ați terminat modificarea modulului de imagine din coloana 1, îl puteți clona și plasa duplicatele în coloanele rămase. Asigurați-vă că schimbați și imaginile.

previzualizare

Acum, că am parcurs toți pașii și toate cele patru exemple, să aruncăm o privire finală asupra celor trei exemple pe care le-am creat.

Gânduri finale

Schimbarea unei imagini pe hover poate contribui la aducerea acelei interacțiuni suplimentare în secțiunile de mărturie, despre pagini și pagini ale echipei. În acest tutorial, v-am arătat o modalitate ușoară de a realiza diferite tipuri de imagini pe hover folosind doar opțiunile încorporate ale Divi! Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Imagine prezentată de LovArt / shutterstock.com