How can I change the image within a link block when hovering over it in Webflow?

To change an image within a link block on hover, you’ll need to use Webflow’s built-in Interactions or Combo Classes with an image swap. Here’s how to do it step by step.

​

1. Structure Your Link Block

​

• Add a Link Block to your Webflow canvas.
• Inside the Link Block, add two images: one will be the default image, and one the hover image.
• Give each image its own class or identifier, like Image Default and Image Hover.

​

2. Style the Images

​

• Set the default image to be visible and the hover image to be hidden initially.
• Select the hover image.
• In the Style panel, set Display to None under the Layout section.

​

3. Create a Hover Interaction

​

• Select the Link Block.
• Go to the Interactions panel (lightning icon).
• Click + for a new interaction and choose Mouse Hover (While Hovering).
• Under On Hover, choose Display None for default and Display Block (or Flex) for hover image.
• Under On Hover Out, reverse the action:
• Show the default image and hide the hover image
• Optionally, add a fade animation using Opacity changes for a smoother effect.

​

4. Optional: Use Opacity Instead of Display

​

• Instead of toggling display, you can control opacity if smoother transitions are desired.
• Set both images to position absolute and stack on top of each other.
• Set the hover image opacity to 0 by default.
• In the interaction, change opacity to 100% on hover and back to 0 on hover out.
• Add transition effects for the opacity in the Style panel for both images.

​

Summary

​

Use two images inside a Link Block—one visible by default and one hidden. Apply an interaction to the Link Block that toggles visibility (via Display or Opacity) on hover. Use Webflow’s Interactions panel to control this effect without any custom code.