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

You can create a hover interaction in Webflow to play a GIF by revealing a hidden GIF on hover, since GIFs play automatically when loaded. Webflow doesn’t support pausing/playing GIFs directly, but this method mimics the behavior.

​

1. Prepare Two Images

​

• Create two versions of your image:
• Static image (e.g., JPG or PNG) – shows before hover.
• GIF version – plays when visible.
• Name them clearly so you can distinguish them in the Webflow Assets panel.

​

2. Add Both Images to Your Webflow Project

​

• Drag a Div Block onto your canvas to act as a container.
• Place the static image inside the Div.
• Place the GIF image on top of the static image.
• Set the GIF’s position to Absolute (top-left) and 100% width and height to match the static image.
• Set the GIF image’s initial opacity to 0% so it's hidden.

​

3. Create the Hover Interaction

​

• Select the Div Block container and click the Interactions (lightning bolt) panel.
• Click + under Element Trigger, choose Hover.
• Under Hover In, add an animation:
• Click Timed Animation > New Animation.
• Add a step to target the GIF image.
• Set opacity from 0% to 100% (duration ~0.2s for smooth fade).
• Under Hover Out, add another animation:
• Set opacity from 100% back to 0%.

​

4. Adjust Z-Index if Needed

​

• Make sure the GIF image appears above the static image by adjusting the z-index.
• Set the GIF to a higher z-index (e.g., 10) and the static image to a lower one (e.g., 1).

​

5. Optional: Lazy-Load Optimization

​

• Consider setting the GIF to loading="lazy" to defer loading until needed, reducing initial load time. You can set this in the Element Settings panel.

​

Summary

​

You can simulate playing a GIF on hover in Webflow by layering a hidden GIF over a static image and using a hover trigger to reveal it. This creates a seamless hover-to-play effect without direct GIF controls.