Elementor: Cum să schimbați o imagine la trecerea cursorului peste text

Doriți să schimbați o imagine când treceți cu mouse-ul peste text cu Page Builder Elementor ? În acest nou tutorial, vă vom arăta cum să o faceți.

Dacă nu aveți idee despre ce vrem să vorbim astăzi, vă invităm să vizionați următorul videoclip:

Apoi să revenim la motivul pentru care suntem aici.

Descoperiți și ghidul nostru pe:  Cum se creează un card cu efect de portofoliu cu Elementor

Pentru a finaliza acest tutorial, veți avea nevoie versiunea Pro a Elementor, deoarece vom folosi cod CSS personalizat, care este acceptat numai de această versiune aElementor.

Să creăm o secțiune cu 2 coloane, apoi în panoul lateral, să definim Înălțime pe Înălțime minşi apoi Inaltimea minima hai să facem clic VH și setați glisorul la 100.

În filă Stil hai să-l selectăm Tip de fundal en cliquant sur clasic, apoi modificați-l culoare pe# F9F9F9

În filă avansat, hai să modificăm totul Marjele interne pe 25

Acum să schimbăm lățimea coloanelor la 40% pentru coloana din stânga și 60% pentru coloana din dreapta.

În coloana din stânga, să aruncăm a Widget Editor de text, apoi să lipim un Text în el și să-l modificăm Dimensiunea titlului text activat Titlul 3.

În filă avansat, să intrăm ca Marje interne 10-25-10-30 respectiv pentru marginile interne de sus, dreapta, jos și stânga

În secțiunea fundal filă avansat, Click pe PREZENTARE GENERALĂ, apoi selectați tipul de fundal pe clasic, hai să o luăm culoare #DFF5FF et Durata tranziției pe 0.5.

Dacă trecem cu mouse-ul peste text, vom avea ocazia să descoperim o culoare frumoasă de fundal la hover.

Acum să trecem la secțiune frontiere, și faceți clic pe PREZENTARE GENERALĂ, apoi selectați A continua pentru tipul de chenar et haideți să dezactivăm legătura de frontieră a intra 4 pentru marginea stângă. Să alegem culoarea #002FA7 și adăugați o durată de tranziție la 0.5

Dacă trecem din nou peste caseta de text, vom vedea o animație mai proeminentă cu un chenar în stânga.

În secțiunea frontieră, să revenim la filă NORMAL, să selectăm tipul de chenar A continua, să dezactivăm legătura dintre granițe, să luăm 4 pentru marginea stângă și faceți-o foarte transparentă.

Dacă trecem peste text încă o dată, vom vedea o tranziție foarte lină.

Citiți și: Cum să afișați text deasupra unei imagini cu Elementor

Să duplicăm acest text de două ori și să schimbăm textele fiecăruia cuprins ca aceasta.

În coloana din dreapta, să tragem a Widget imagine, și inserați o imagine din biblioteca noastră.

Vom crea un spațiu în jurul acestei imagini mergând la Filă avansată a coloanei și introduceți 10 – 10 – 10 – 50 pentru toate marginile interne de Sus, Dreapta, Jos și Stânga.

Să selectăm imaginea și în filă avansat dintre acestea din urmă, să trecem la secțiune Efecte de mișcare apoi în Animație de intrare, Selectați Fade In

Să intrăm în secțiune avansat din fila Advanced și adăugați câteva nume de clase în câmpul CSS Classes. Deci hai să luăm all-img img-1

Să ne duplicam imaginea de 2 ori.

Să selectăm a doua imagine și să schimbăm img-1 în img-2, apoi schimbăm imaginea cu o nouă imagine.

Vezi și: Cum se creează o galerie de imagini cu Elementor

Pentru a treia imagine, să schimbăm img-1 în img-3, apoi schimbăm imaginea cu o nouă imagine.

Să selectăm secțiunea noastră și să mergem la fila acesteia avansat. În secțiune CSS personalizat, copiați și inserați următorul fragment de cod:

selector .all-img{
    display: none;
}
selector .img-1{
    display: block;
}

(Dacă nu aveți această secțiune, atunci nu aveți versiunea Pro, dacă doriți să continuați, trebuie să faceți upgrade la versiunea dvs.).

Să selectăm primul nostru editor de text și să mergem la fila Avansat și în Secțiunea Atribute. În teren atribute, copiați și inserați următorul fragment de cod:

data-showme|img-1

Faceți acest lucru pentru alți editori de text în timp ce schimbați img-1 în img-2 sau img-3

Acum vom adăuga un widget HTML pe pagina noastră. Să copiem și să lipim următorul script:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.' + showme).show()
        
    })
})
</script>

Acum salvați sau actualizați pagina și apoi previzualizați-o.

Iată, tocmai ai făcut această sarcină cu ușurință.

Obțineți Elementor Pro acum!

Concluzie

Iata ! Asta este pentru acest articol care vă arată cum să schimbați o imagine la trecerea cursorului peste un text. Dacă aveți nelămuriri despre cum să ajungeți acolo, anunțați-ne în termen comentarii.

Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...