Change Image On Hover In Elementor

Welcome to WebSense Pro, your go-to destination for all things web development! Today, we’re diving into a highly requested topic: adding image hover effects using Elementor. Whether you’re a beginner or looking to enhance your skills, this tutorial will guide you through the process step by step. In this basic-level Elementor tutorial, we’ll show you how to create captivating image hover effects that dynamically change when users interact with them. Get ready to elevate your website’s visual appeal and engage your audience like never before.

Step 1: Setting Up the Page Layout

First things first, let’s create a new page in Elementor. We’ll start by adding a heading widget and configuring a flexbox container with two columns – one for the image and the other for text.

Step 2: Adding the Image Widget

Drag and drop the image widget onto the designated column. Choose your desired image and insert it. Next, navigate to the advanced settings and add the CSS class “image-hover” to enable the hover effect.

Step 3: Implementing Custom Code

To enable the hover effect, we’ll need to add custom JavaScript code. Access the Elementor dashboard and select the custom code option. Create a new code snippet and specify the location as “body end.” Paste the provided JavaScript code, which will define the default and hover images.

<script>
    // Change image on hover
    jQuery(".img-hover img").hover(function(){
  jQuery(this).attr('srcset','https://websensepro.com/youtube/wp-content/uploads/2024/03/HomePage-Sightseeing_2.jpg');
  }, function(){
  jQuery(this).attr('srcset','https://websensepro.com/youtube/wp-content/uploads/2024/03/HomePage-Sightseeing_1.jpg');
});
</script>

Step 4: Preview and Enhance

Preview your page to ensure the hover effect is working correctly. Once confirmed, you can further enhance the design by adding additional elements or customizing the layout to suit your preferences.

Step 5: Adding Multiple Elements with Hover Effects

To demonstrate versatility, we’ll show you how to apply the same hover effect to multiple elements on your page. By adding another flexbox container and repeating the process, you can create a cohesive design with consistent hover effects throughout.

Conclusion: Congratulations! You’ve successfully learned how to add image hover effects using Elementor. With this newfound knowledge, you can create visually stunning websites that captivate your audience and leave a lasting impression.