Želite li promijeniti sliku kada zadržite pokazivač iznad teksta pomoću stranica Builder Elementor ? U ovom novom vodiču pokazat ćemo vam kako to učiniti.

Ako nemate pojma o čemu danas želimo razgovarati, pozivamo vas da pogledate sljedeći video:

promijenite sliku kada zadržite pokazivač miša iznad teksta pomoću Elementora za izgradnju stranica

Vratimo se onda zašto smo ovdje.

Otkrijte i naš vodič o:  Kako napraviti karticu s efektom portfelja s Elementorom

Da biste dovršili ovaj vodič, trebat će vam Pro verzija Elementora, jer ćemo koristiti prilagođeni CSS kod koji podržava samo ova verzijaElementor.

Napravimo odjeljak s 2 stupca, a zatim u bočnoj ploči definirajmo Visina sur Minimalna visinaa onda Minimalna visina kliknimo na VH i postavite klizač na 100.

promijenite sliku kada zadržite pokazivač miša iznad teksta pomoću Elementora za izgradnju stranica

U kartici Stil odaberimo ga Vrsta pozadine en cliquant sur klasična, a zatim izmijenite boja sur# F9F9F9

promijenite sliku kada zadržite pokazivač miša iznad teksta pomoću Elementora za izgradnju stranica

U kartici napredan, izmijenite sve Unutarnje margine sur 25

Sada promijenimo širinu stupca u 40% za lijevu kolonu i 60% za desni stupac.

promijenite sliku kada zadržite pokazivač miša iznad teksta pomoću Elementora za izgradnju stranica

U lijevom stupcu ispustimo a Widget za uređivač teksta, zatim u njega zalijepite tekst i izmijenite Veličina naslova tekst na Naslov 3.

U kartici napredan, unesite kao Unutarnje margine 10-25-10-30 odnosno za gornja, desna, donja i lijeva unutarnja margina

U odjeljku pozadina tab napredan, kliknite na PREGLED, zatim odaberite vrsta pozadine sur klasična, unesimo ga boja #DFF5FF et Trajanje prijelaza sur 0.5.

Ako zadržite pokazivač iznad teksta, imat ćemo priliku otkriti veličanstvenu boju pozadine pri lebdenju.

Idemo sada na odjeljak granice, i kliknite na PREGLED, zatim odaberite nastaviti za tip granice et deaktivirajmo vezu između granice ući 4 za lijeva granica. Odaberimo boju #002FA7 i dodajte trajanje prijelaza u 0.5

Ako još jednom zadržite pokazivač miša iznad našeg okvira za tekst, vidjet ćemo istaknutiju animaciju s obrubom s lijeve strane.

U odjeljku granica, vratimo se na karticu NORMALNA, odaberimo vrstu obruba na nastaviti, isključimo vezivanje između obruba, zgrabimo 4 za lijevu granicu i učiniti ga vrlo transparentnim.

Ako još jednom zadržite pokazivač miša iznad teksta, vidjet ćemo vrlo gladak prijelaz.

Pročitajte također: Kako prikazati tekst iznad slike pomoću Elementora

Duplicirajmo ovaj tekst dva puta i promijenimo tekstove svakoga sadržaj kao ovo.

U desnom stupcu povucite a Slikovni widget, i umetnite sliku iz naše biblioteke.

Napravit ćemo prostor oko ove slike odlaskom na Napredna kartica stupca i unesite 10 – 10 – 10 – 50 za sve unutarnje margine gornje, desne, donje i lijeve strane.

Odaberimo sliku i u kartici napredan od potonjeg, idemo na odjeljak Efekti kretanja a zatim u Animacija za ulaz, Izaberi Fade In

Idemo u odjeljak napredan s kartice Napredno i dodajte neke nazive klasa u polje CSS Classes. Pa idemo sve-img img-1

Duplicirajmo našu sliku 2 puta.

Odaberimo drugu sliku i promijenimo img-1 u img-2, a zatim promijenimo sliku u novu sliku.

Vidi također: Kako napraviti galeriju slika pomoću Elementora

Za treću sliku samo promijenimo img-1 u img-3, a zatim promijenimo sliku u novu sliku.

promijenite sliku kada zadržite pokazivač miša iznad teksta pomoću Elementora za izgradnju stranica

Odaberimo naš odjeljak i prijeđimo na njegovu karticu napredan. U odjeljku Prilagođena CSS, kopirajte i zalijepite sljedeći isječak koda:

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

(Ako nemate ovaj odjeljak, onda nemate Pro verziju, ako želite nastaviti, morate nadograditi svoju verziju).

promijenite sliku kada zadržite pokazivač miša iznad teksta pomoću Elementora za izgradnju stranica

Odaberimo naš prvi uređivač teksta i idimo na karticu Napredno i na Odjeljak s atributima. U području Značajke, kopirajte i zalijepite sljedeći isječak koda:

data-showme|img-1

Učinite to za druge uređivače teksta dok mijenjate img-1 u img-2 ili img-3

Sada dodajmo HTML widget na našu stranicu. Kopirajte i zalijepite sljedeću skriptu:

<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>
promijenite sliku kada zadržite pokazivač miša iznad teksta pomoću Elementora za izgradnju stranica

Sada spremite ili ažurirajte svoju stranicu, a zatim je pregledajte.

promijenite sliku kada zadržite pokazivač miša iznad teksta pomoću Elementora za izgradnju stranica

Eto, upravo ste lako obavili ovaj zadatak.

Nabavite Elementor Pro odmah!

Zaključak

Tu je ! To je to za ovaj članak koji vam pokazuje kako promijeniti sliku kada zadržite pokazivač iznad teksta. Ako imate bilo kakvih nedoumica oko toga kako doći do tamo, javite nam unutar Komentari.

Međutim, možete se konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...