Elementor: How to change an image on hover over text

Do you want to change an image on hover over a text with the Page Builder Elementor ? In this new tutorial, we will show you how to do it.

If you have no idea what we want to talk about today, we invite you to watch the following video:

Then let's go back to why we are here.

Also discover our guide on:  How to Create a Portfolio Effect Card with Elementor

To complete this tutorial, you will need the Pro version of Elementor, because we will be using custom CSS code which is only supported by this version ofElementor.

Let's create a section with 2 columns, then in the side panel, let's define the Height on Min Height, And then Minimum height let's click on VH and set the slider to 100.

In the tab Style let's select it Background type clicking on Classic, then modify the color on# F9F9F9

In the tab Advanced, modify all the Internal margins on 25

Now let's change the column width to 40% for the left column and 60% for the right column.

In the left column, let's drop a Text Editor Widget, then paste a Text in it and modify the Title Size text on Title 3.

In the tab Advanced, enter as Internal Margins 10-25-10-30 respectively for the top, right, bottom and left internal margins

In the section Background tab Advanced, click on OVERVIEW, then select the background type on Classic, let's enter it color #DFF5FF et Transition Duration on 0.5.

If we hover over the text, we will have the opportunity to discover a magnificent background color on hover.

Now let's go to the section Bordures, and click on OVERVIEW, then select Continue for the border type et let's deactivate the link between border to grab 4 for left border. Let's select the color #002FA7 and add a transition duration to 0.5

If we hover over our text box one more time we'll see a more prominent animation with a border to the left.

In the section border, let's go back to the tab NORMAL, let's select the border type on Continue, disable binding between borders, grab 4 for the left border and make it very transparent.

If we hover over the text one more time, we will see a very smooth transition.

Read also: How to display text above an image with Elementor

Let's duplicate this text twice and change the texts of each contents like this.

In the right column, drag a Image widget, and insert an image from our library.

We're going to create some space around this image by going to Advanced Tab of the column and enter 10 – 10 – 10 – 50 for all internal margins of Top, Right, Bottom and Left.

Let's select the image and in the tab Advanced of the latter, let's go to the section Motion effects then in Entrance Animation, select Fade In

Let's go into the section Advanced from the Advanced Tab and add some class names in the CSS Classes field. So let's get all-img img-1

Let's duplicate our image 2 times.

Let's select the second image and change img-1 to img-2, then change the image to a new image.

See also: How to create an image gallery with Elementor

For the third image let's just change img-1 to img-3, then change the image to a new image.

Let's select our section and go to its tab Advanced. In the section Custom CSS, copy and paste the following code snippet:

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

(If you don't have this section then you don't have the Pro version, if you want to continue you need to upgrade your version).

Let's select our first text editor and go to the Advanced tab and the Attributes section. In the field Attributes, copy and paste the following code snippet:

data-showme|img-1

Do this for other text editors while changing img-1 to img-2 or to img-3

Now let's add an HTML widget to our page. Copy and paste the following 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>

Now save or update your page and then preview it.

There you go, you have just done this task easily.

Get Elementor Pro Now!

Conclusion

So ! That's it for this article that shows you how to change an image on hover over a text. If you have any concerns about how to get there let us know within Comments.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...