How can I create a hover interaction in Webflow to make my gifs start playing when hovered over?

To make your GIFs play on hover in Webflow, you need to swap a static image (like a JPG or PNG) with a GIF when the user hovers. Webflow doesn’t support animation control for GIFs directly, but this swap technique achieves the same effect.

1. Prepare Two Image Files

• Create two versions of your image:

• A static version (e.g., JPG or PNG) that represents the first frame.

• The GIF version you want to play on hover.

• Ensure both images are the same dimensions for a seamless swap.

2. Add Both Images in Webflow

• Drag a Div Block from the Add panel onto the canvas.

• Place both images inside this Div:

• Add the static image and name it (e.g., Static Image).

• Add the GIF image and name it (e.g., GIF Image).

• Set both images to position: absolute and the wrapper Div to position: relative so they stack on top of each other.

3. Style the Images for Default State

• Select the GIF image and set its opacity to 0% so only the static image is visible by default.
• Keep the static image at 100% opacity.

4. Create the Hover Interaction

• Select the wrapper Div Block, and go to Interactions > Element Trigger > Mouse Hover.

• Choose "Hover In" and then:

• Add an action to hide the static image (opacity → 0%).

• Add another action to show the GIF image (opacity → 100%).

• Then set up the "Hover Out" state:

• Reverse the actions: static image to opacity 100%, GIF image to opacity 0%.

• Set duration (e.g., 0.2s) for smoother transitions if desired.

5. Mobile Considerations

• Hover doesn’t exist on touch devices. For mobile users, consider an on-click interaction instead if the effect is crucial.

Summary

To play a GIF on hover in Webflow, stack a static image and a GIF inside a wrapper Div, then use a hover interaction to swap their opacities. This fakes a "play on hover" effect without needing true GIF control.