How To Swap Between Multiple Images On Hover In Elementor

Share on facebook
Facebook
Share on twitter
Twitter
Share on reddit
Reddit
Share on whatsapp
WhatsApp

Make sure to add the class img-swap to your image element

Javascript Code

				
					<script>
const imgContainer = document.querySelector('.img-swap img');

imgContainer.addEventListener('mouseover', () => {
  imgContainer.srcset = '';
  setTimeout(() => {
    imgContainer.srcset = '';
  }, 300);
  setTimeout(() => {
    imgContainer.srcset = '';
  }, 600);
});

imgContainer.addEventListener('mouseout', () => {
  imgContainer.srcset = '';
});
</script>

				
			
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

More to explorer

Elementor Text Over Image Section On Hover

https://youtu.be/jf6w5aXFOjI CSS Code selector{ height: 300px; overflow: hidden; } selector .inner-box__hover-box{ height: 100%; display: flex; align-items: center; } selector .learn-btn{ transform: translateY(35px);

Add text over Image on Hover in Elementor Pro WordPress

https://youtu.be/jf6w5aXFOjI CSS Code selector{ height: 300px; overflow: hidden; } selector .inner-box__hover-box{ height: 100%; display: flex; align-items: center; } selector .learn-btn{ transform: translateY(35px);

0
Would love your thoughts, please comment.x
()
x

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.