Image Swap from Static to Animated Gif

I need help getting this to work correctly. I did some research on the forums, and some of the solutions, using code, didn’t seem to take advantage of the built in interaction tools. Maybe someone could walk me through it, and maybe even show a working demo of it.

The concept is to hover over a static image, and have it fade out and have an animated gif of the same image fade in, in the same place, so it’s seamless, in other words so that the image appears to animate on hover, and stop animating on hover off. I thought I understood how to get it working, but it wasn’t working. I shrunk them both down to about 42 px wide. I tried putting them on top of each other, but they seem to interfere with each other. Can I have two images in the same position, and one fades out and one fades in on hover?

Hey @elcalibano

i would just use a div with those images set as backgrounds and use the hover state to switch back and forth.

I put a quick example together with your images. The page is a bit messy right now.
http://sand-box.webflow.io/animations

Here is the project page.
https://webflow.com/website/sand-box

Cheers,
Alex

2 Likes

Alex, you’re a genius, that worked. It looks like this question has been asked a dozen different ways in the forum, but I didn’t really understand the answers until I saw your project page. I think this technique needs to put in the official webflow documentation. I put those image files together in my work in progress page. Here’s the link to see it: http://scindoyan.webflow.io

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.