Do you want to change image at the click of a button 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.

Read also: How to change an image on hover over text 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.

Let's drag the Image widget to the left column and insert an image from our library.

In the right column, let's insert a Title Widget titled Choose The Best. In the tab Style let's click on Typography and modify the Line height at 1.

See also: How to change an imagege on hover over text with Elementor

Let's add below the Title widget, a Text Editor widget.

Above the Title widget, let's drop a Separator Widget into its tab Contents, let's enter 270 for width. Let's click on Text for Add element, then enter Trendy as text. In the tab Style, modify the Grease and the gap on 2.

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

In the Text section, click on Typography, let's change the font, the Select on 18, Grease on 600.

Below the Editor widget contents, let's file a Internal section, delete one of the columns of the Internal Section and drop in the latter a button-widget

Let's modify the button by going to the side panel and in the tab Contents, click on icon library on Icon and insert the icon Shopping Bag, let's also clear the contents of the button on texts

Let's go to the tab Style of the button and in Border Radius, click on % and seize 50 for all curb radii and in Internal margins, let's enter 20.

Let's customize the color of the button by changing the color of the latter by clicking on Classic for the Background Type and Let's change the color according to the highlight color on the image.

Then click on the Tab Advanced of our button, then on Positioning and Width select Inline (Auto). In the Advanced section ofAdvanced tab, let's enter 10 for right margin.

Let's duplicate this button 4 times and modify the colors of these buttons.

Next, let's duplicate our Image widget 4 times, then modify their images.

In L'Advanced tab, let's enter all images in the field CSS classes of each of our images.

Then in the field CSS ID enter red-image for the image with a red highlight, green-image for the image with a green highlight, and brown-image for the image with a brown highlight, and so on.

Let's select our Section and in theAdvanced tab, in the field Custom CSS copy and paste the following code snippet:

.all-images{
    display: none;
}
#red-image{
    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)

Next, let's drop an HTML widget into our page, copy and paste the following code snippet into the HTML Code section:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

Let's select the first button, in the field Custom Attributes full Attributes section, copy and paste the following code snippet:

data-showme|IMAGE-ID-NAME

Let's modify the IMAGE-ID-NAME part by the IDs of your buttons, these are the red-image, green-image and blue-image IDs, and so on.

So for each button, let's change the IMAGE-ID-NAME code to the color of the appropriate button

Update your work and preview it in desktop, tablet and smartphone mode while testing your buttons.

In smartphone mode, you can, for example, align the buttons in the center, reduce the margins and much more.

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.

...