Vill du ändra en bild när du håller muspekaren över en text med Page Builder Elementor ? I den här nya handledningen kommer vi att visa dig hur du gör.

Om du inte har någon aning om vad vi vill prata om idag, inbjuder vi dig att titta på följande video:

ändra en bild när du håller muspekaren över en text med Page Builder Elementor

Låt oss sedan gå tillbaka till varför vi är här.

Upptäck också vår guide om:  Hur man skapar ett effektkort från en portfölj med Elementor

För att slutföra den här handledningen behöver du Pro-versionen av Elementor, eftersom vi kommer att använda anpassad CSS-kod som endast stöds av den här versionen avElementor.

Låt oss skapa en sektion med 2 kolumner, och sedan i sidopanelen, låt oss definiera HÖGMOD sur Min höjdoch sedan Minsta höjd låt oss klicka vidare VH och ställ in reglaget på 100.

ändra en bild när du håller muspekaren över en text med Page Builder Elementor

På fliken Stil låt oss välja det Bakgrundstyp klicka på klassisk, ändra sedan färg sur# F9F9F9

ändra en bild när du håller muspekaren över en text med Page Builder Elementor

På fliken advanced, ändra alla Interna marginaler sur 25

Låt oss nu ändra kolumnbredden till 40% för den vänstra kolumnen och 60% för den högra kolumnen.

ändra en bild när du håller muspekaren över en text med Page Builder Elementor

I den vänstra kolumnen, låt oss släppa en Textredigeringswidget, klistra sedan in en text i den och ändra Titelstorlek text på Avdelning 3.

På fliken advanced, ange som Interna marginaler 10-25-10-30 respektive för övre, högra, nedre och vänstra interna marginalerna

I avsnittet bakgrund flik advanced, Klicka på ÖVERSIKT, välj sedan bakgrundstyp sur klassisk, låt oss skriva in det färg #DFF5FF et Övergångsperiod sur 0.5.

Om vi ​​håller muspekaren över texten kommer vi att ha möjlighet att upptäcka en magnifik bakgrundsfärg på hover.

Låt oss nu gå till avsnittet gränser, och klicka på ÖVERSIKT, välj sedan Fortsätta för gränstyp et låt oss inaktivera länken mellan gränsen att gå in 4 för vänster kant. Låt oss välja färg #002FA7 och lägg till en övergångslängd till 0.5

Om vi ​​för muspekaren över vår textruta en gång till kommer vi att se en mer framträdande animering med en ram till vänster.

I avsnittet gräns, låt oss gå tillbaka till fliken VANLIGT, låt oss välja kanttyp på Fortsätta, låt oss stänga av bindningen mellan gränserna, ta tag 4 för den vänstra kanten och gör den mycket transparent.

Om vi ​​håller muspekaren över texten en gång till kommer vi att se en mycket smidig övergång.

Läs också: Hur man visar text ovanför en bild med Elementor

Låt oss duplicera denna text två gånger och ändra texterna för varje innehåll så här.

Dra a i den högra kolumnen Bildwidget, och infoga en bild från vårt bibliotek.

Vi kommer att skapa ett utrymme runt den här bilden genom att gå till Fliken Avancerat i kolumnen och ange 10 – 10 – 10 – 50 för alla interna marginaler av Top, Right, Bottom och Left.

Låt oss välja bilden och i fliken advanced av det senare, låt oss gå till avsnittet Rörelseeffekter sedan i Entréanimation, Välj Fade I

Låt oss gå in på avsnittet advanced från fliken Avancerat och lägg till några klassnamn i fältet CSS-klasser. Så låt oss ta all-img img-1

Låt oss duplicera vår bild 2 gånger.

Låt oss välja den andra bilden och ändra img-1 till img-2 och sedan ändra bilden till en ny bild.

Se även: Hur man skapar ett bildgalleri med Elementor

För den tredje bilden, låt oss bara ändra img-1 till img-3 och sedan ändra bilden till en ny bild.

ändra en bild när du håller muspekaren över en text med Page Builder Elementor

Låt oss välja vår sektion och gå till dess flik advanced. I avsnittet Anpassad CSS, kopiera och klistra in följande kodavsnitt:

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

(Om du inte har det här avsnittet så har du inte Pro-versionen, om du vill fortsätta måste du uppgradera din version).

ändra en bild när du håller muspekaren över en text med Page Builder Elementor

Låt oss välja vår första textredigerare och gå till fliken Avancerat och till Avsnittet Attribut. På fältet attribut, kopiera och klistra in följande kodavsnitt:

data-showme|img-1

Gör detta för andra textredigerare medan du ändrar img-1 till img-2 eller till img-3

Låt oss nu lägga till en HTML-widget på vår sida. Kopiera och klistra in följande skript:

<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>
ändra en bild när du håller muspekaren över en text med Page Builder Elementor

Spara eller uppdatera din sida och förhandsgranska den sedan.

ändra en bild när du håller muspekaren över en text med Page Builder Elementor

Där har du, du har precis gjort den här uppgiften enkelt.

Skaffa Elementor Pro nu!

Slutsats

Där är det ! Det är allt för den här artikeln som visar hur du ändrar en bild när du håller muspekaren över en text. Om du har några funderingar kring hur du tar dig dit låt oss veta inom commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.