Change images on hover in Elementor (2024) – 4 Swapping Methods

Here’s the code for the video!

<script>
    // Swap images set 1

jQuery('.swap-img-1 img').hover(function(){

      // On mouseover
                let selector = this;
                
                // Add CSS here
                jQuery(selector).css({
            'border':'10px dashed black',
            'margin':'30px'
                });
                        
                jQuery(selector).attr('srcset','http://elementor-playground.local/wp-content/uploads/2024/08/landscape-1.png'); // Original image URL goes here

                setTimeout(function() {
                        jQuery(selector).attr('srcset','http://elementor-playground.local/wp-content/uploads/2024/08/landscape-2.png'); // First image to swap to
                        }, 1000); // Time in milliseconds this image stays

                setTimeout(function() {
                        jQuery(selector).attr('srcset','http://elementor-playground.local/wp-content/uploads/2024/08/landscape-3.png'); // Second image to swap to
                        }, 2000); // Time in milliseconds this image stays

                setTimeout(function() {
                        jQuery(selector).attr('srcset','http://elementor-playground.local/wp-content/uploads/2024/08/landscape-4.png'); // Third image to swap to
                        }, 3000); // Time in milliseconds this image stays

}, function(){
    // End hover
        jQuery(this).attr('srcset','http://elementor-playground.local/wp-content/uploads/2024/08/landscape-1.png'); // Original image URL goes here
        
        // CSS for after the animation
        jQuery(this).css({
            'border':'none',
            'margin':'0px'
        });
});