Elementor: Hoe verander je een afbeelding wanneer je met de muis over de tekst beweegt

Wil je een afbeelding wijzigen door met de muis over een tekst te bewegen met de Pagina Builder Elementor ? In deze nieuwe tutorial laten we je zien hoe je dit doet.

Als je geen idee hebt waar we het vandaag over willen hebben, nodigen we je uit om de volgende video te bekijken:

Laten we dan teruggaan naar waarom we hier zijn.

Ontdek ook onze gids over:  Een portfolio-effectkaart maken met Elementor

Om deze tutorial te voltooien, heb je nodig: de Pro-versie van Elementor, omdat we aangepaste CSS-code zullen gebruiken die alleen wordt ondersteund door deze versie vanElementor.

Laten we een sectie met 2 kolommen maken en vervolgens in het zijpaneel de . definiëren hoogmoed op Minimale hoogte, en dan Minimale hoogte laten we klikken op VH en zet de schuifregelaar op 100.

In het tabblad Style laten we het selecteren Achtergrondtype en cliquant sur klassiek, wijzig dan de couleur op# F9F9F9

In het tabblad vergevorderd, wijzig alle Interne marges op 25

Laten we nu de kolombreedte veranderen in 40% voor de linkerkolom en 60% voor de rechterkolom.

Laten we in de linkerkolom een ​​neerzetten Teksteditor-widget, plak er dan een tekst in en wijzig de Titel Grootte tekst op Titel 3.

In het tabblad vergevorderd, voer in als Interne marges 10-25-10-30 respectievelijk voor de bovenste, rechter, onderste en linker interne marges

In de sectie achtergrond tabblad vergevorderd, Klik op OVERZICHTen selecteer vervolgens de achtergrondtype op klassiek, laten we het invoeren kleur #DFF5FF et Overgangsduur op 0.5.

Als we met de muis over de tekst gaan, krijgen we de kans om een ​​prachtige achtergrondkleur te ontdekken tijdens het zweven.

Laten we nu naar de sectie gaan bordersen klik op OVERZICHTen selecteer vervolgens voortzetten voor grens type et laten we de link tussen grens deactiveren pakken 4 voor linkerrand. Laten we de kleur selecteren #002FA7 en voeg een overgangsduur toe aan 0.5

Als we nog een keer over ons tekstvak gaan, zien we een meer prominente animatie met een rand aan de linkerkant.

In de sectie grens, laten we teruggaan naar het tabblad NORMAAL, laten we het randtype selecteren op voortzetten, laten we de binding tussen randen uitschakelen, grab 4 voor de linkerrand en maak deze heel transparant.

Als we nog een keer over de tekst gaan, zien we een zeer vloeiende overgang.

Lees ook: Tekst boven een afbeelding weergeven met Elementor

Laten we deze tekst twee keer dupliceren en de teksten van elke tekst wijzigen inhoud soortgelijk.

Sleep in de rechterkolom a Afbeeldingswidget, en voeg een afbeelding uit onze bibliotheek in.

We gaan een ruimte rond deze afbeelding maken door naar . te gaan Tabblad Geavanceerd van de kolom en voer 10 – 10 – 10 – 50 in voor alle interne marges van Boven, Rechts, Onder en Links.

Laten we de afbeelding selecteren en in het tabblad vergevorderd van de laatste, laten we naar de sectie gaan Bewegingseffecten dan Entree Animatie, selecteer Fade In

Laten we naar de sectie gaan vergevorderd van het tabblad Geavanceerd en voeg enkele klassenamen toe in het veld CSS-klassen. Dus laten we gaan alles-img img-1

Laten we onze afbeelding 2 keer dupliceren.

Laten we de tweede afbeelding selecteren en img-1 wijzigen in img-2, en vervolgens de afbeelding wijzigen in een nieuwe afbeelding.

Zie ook: Hoe maak je een afbeeldingengalerij met Elementor

Laten we voor de derde afbeelding gewoon img-1 veranderen in img-3, en dan de afbeelding veranderen in een nieuwe afbeelding.

Laten we onze sectie selecteren en naar het tabblad gaan vergevorderd. In de sectie Aangepaste CSS, kopieer en plak het volgende codefragment:

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

(Als je deze sectie niet hebt, heb je de Pro-versie niet, als je door wilt gaan, moet je je versie upgraden).

Laten we onze eerste teksteditor selecteren en naar het tabblad Geavanceerd gaan en naar de Eigenschappen sectie. In het veld Attributen, kopieer en plak het volgende codefragment:

data-showme|img-1

Doe dit voor andere teksteditors terwijl u img-1 wijzigt in img-2 of img-3

Laten we nu een HTML-widget aan onze pagina toevoegen. Kopieer en plak het volgende 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>

Sla nu uw pagina op of werk deze bij en bekijk er een voorbeeld van.

Daar ga je, je hebt deze taak zojuist gemakkelijk gedaan.

Download Elementor Pro nu!

Conclusie

Alstublieft ! Dat is het voor dit artikel dat u laat zien hoe u een afbeelding kunt wijzigen wanneer u met de muis over een tekst zweeft. Als u zich zorgen maakt over hoe u daar kunt komen, laat het ons dan weten binnen commentaires.

U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

...