Mobile viewers: visit the desktop version to see the working demo!
Someone in the Facebook group asked how to make this: a smooth background image change on hover of any Elementor element. Here it is!
You can also check out this related premium tutorial to have even more control over your design:
To begin with, create a new section with these settings
You can change these to fit your design.
Add the basic background image to the section
Adjust the position, repeat and size settings. The same settings will be used by the other background images.
Then, add a background overlay and adjust the opacity
Give this main section a CSS ID.
In this example, ‘naturesection’ is the CSS ID.
Create your elements in the section
In this case, I used the Icon Box element, with buttons below them.
Give a class name to each column
Upon hovering any point in the column, the background will change image.
Here, they are called respectively ‘beach’ , ‘mountain’ and ‘nature’ .
Finally, add this code in an html element
Replace the appropriate class names and CSS ID with your own.
Change the links to link your own images.
<script> /* Please login to get the code * The code will be for the Great Design - Change Background Image on Hover in Elementor tutorial * Found at this URL https://element.how/elementor-background-change-hover/ */ </script>