Changing Background Image on Mouse Hover

Hi all!

I’m new to webflow but have been doing a bit of research on this topic, I’m looking to change a background image of a div on mouse hover over. On a previous forum I read to create two divs both set to absolute:full as a child of a relative container, and to change the background image I am meant to create a mouse hover with an alternate Hide/Show. I just can’t seem to get it to work for me. I want the logo with the displacement map (Glitch FX) to display on mouse hover over and to return to normal when the mouse moves out of place.

I’ve recently just tried changing the none/hover states to be hidden/shown and that doesn’t seem to be a solution either.

Can someone tell me where I’ve gone wrong? I feel like there’s an obvious solution here that I’m not grasping.

Thanks!


Here is my public share link

1 Like

Hey @JosephGMedia

Check the video here and you will soo how to do it > https://www.loom.com/share/ac7e3952edb54f1f9517e7acc3753e8e

Hope this helps :webflow_heart:

Hi Piter, thank you for the speedy response! However this isn’t quite what I am after. I would like the regular logo (Div Block 4) to always be on, and on hover over I would like Div Block 5 to appear and Div Block 4 to disappear, I had originally set up the Interactions in a similar way to you but when I had both of them happening on mouse hover it doesn’t seem to work (I hope that makes sense).

1 Like

I have created a new link to try and show what I have attempted to do to fix the issue and as you can see I can’t quite get it right.

See new public share link here

1 Like

@JosephGMedia check this > https://www.loom.com/share/812f455caadf487ab3ac34d9f87673b9

Piter you are a legend! Thank you for taking the time to help. :slight_smile:

1 Like

Happy to help! :webflow_heart:

Hi is it possible to get a re-up of the loom? I am trying to achieve the same effect in Webflow at the moment.

hi, is it possible to reupload or something ;( ?