Change image on hover in Elementor (FREE)

In this tutorial, I will show you how to change an image on hover in Elememtor. So if you have a WordPress website with Elementor and you want to change an image and display another image once someone hover mouse cursor on it, you can do it easily by using the following jquery codes.

Change Image On Hover – JQuery

<script>
    // Change image on hover
    jQuery(".img-hover img").hover(function(){
  jQuery(this).attr('srcset','');
  }, function(){
  jQuery(this).attr('srcset','');
});
</script>

Swap Between Multiple Images – JQuery

<script>
    // Swap between multiple images on hover

    jQuery(".swap-images img").hover(function(){

      // On mouseover
     let selector = this;

  jQuery(selector).attr('srcset','');

  setTimeout( function() {
       jQuery(selector).attr('srcset','');
  }, 300);

    setTimeout( function() {
       jQuery(selector).attr('srcset','');
  }, 600);


  }, function(){
    // On mouseout
  jQuery(this).attr('srcset','');
});
</script>