How to chance image on hover

Support
#1

Hello,

I have an image element.
I need to chance it to a new image when the mouse hovers over it.
How do I get that effect?

Thanks!

Anders

#2

Hello Anders,

Instead of using an image element, we can use the image as background of a div/container then on hover state change background image. See this guide: https://www.tutorialrepublic.com/codelab.php?topic=faq&file=css-image-swap-on-hover

Hope this helps.

#3

Thanks for the reply and that does solve my problem. However it becomes scaled and bad quality when I do. Are you sure it is not possible with your image element?

#4

Hello @Jell92

Thanks for writing in

Can you try this method,

  1. Add a class to the image, using the class box on the bottom of the element.

  2. assuming you added a class my-image-class in the class field of the image, you can then add this CSS code below in the Custom CSS field of the page

     .my-image-class:hover {
 content: url(your-site.com/your-hover-image.jpg);
 z-index: 999;
 width: 100%;
 }

  3. You can do the same on your other images by assigning another different class and targeting the specific class for custom CSS

Let me know how it works,

Cheers

2 Likes