How can I create a hover interaction in Webflow to make my gifs start playing when hovered over?
TL;DR
- Prepare a static image (first frame) and an animated GIF.
- Place both in a Div Block with relative positioning; set both to absolute with full dimensions, static image on top.
- Create a hover interaction that hides the static image to reveal the GIF, and restores it on hover out.
To make GIFs play on hover in Webflow, you’ll need to simulate this behavior using a workaround, since GIFs always autoplay and can't be controlled directly like videos.
1. Prepare Two Versions of the GIF
- Still Image: Take a screenshot or export the first frame of the GIF as a static image (JPG or PNG).
- Animated GIF: Use the actual GIF file you want to play on hover.
2. Add Both Images to a Webflow Div Block
- Drag a Div Block into your desired section.
- Set its position to Relative under the Style panel.
- Upload both images (static and animated) inside the Div Block.
- Place the static image on top, and ensure its position is absolute & full width/height so it overlaps the GIF.
- The animated GIF should be behind, also set to absolute with full dimensions.
3. Style the Images Correctly
- For both images:
- Set width and height to 100%
- Position: Absolute
- For the container:
- Position: Relative
- Set desired size (e.g., 300px by 300px)
4. Create the Hover Interaction
- Select the Div Block container.
- Go to the Interactions panel (lightning icon).
- Add a new interaction: Choose Mouse Hover → On Hover.
- In the action list, Hide the static image (Set opacity to 0).
- For On Hover Out, set the static image’s opacity back to 100%.
5. Optional: Add a Smooth Transition
- Select the static image, go to the Style panel.
- Add a Transition for the opacity property to make the hover effect smoother.
Summary
To simulate GIFs playing on hover in Webflow, overlay a static image on top of the animated GIF, then use a hover interaction to hide the static image and reveal the GIF underneath.