Webflow sync, pageviews & more.
NEW

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

TL;DR
  • Add two images (default and hover versions) inside a Link Block, hiding the hover image initially.
  • Use either hover states to toggle visibility or interactions to animate the image swap on hover, ensuring both images are styled consistently.

To change an image within a link block on hover in Webflow, you’ll need to use interactions or switch the image using combo classes and hover states.

  • Drag a Link Block onto the canvas.
  • Place an Image Element inside that link block. This is the default image users will see before hovering.
  • Optionally, add another Image Element inside the same link block as the hover state image and hide it initially.

2. Use Combo Classes or States

There are two main approaches:

Option A: Use Hover State + Display Toggle

  • Duplicate your image inside the link block: one for default state, one for hover.
  • Select the hover image, go to the Style panel, and set Display: None under the default state.
  • For the link block, go to its Hover state (in the top-right of the Style panel).
  • Hide the default image (Display: None) and show the hover image (Display: Block or Flex).
  • This causes image swap on hover.

Option B: Use Interactions

  • Select the Link Block, go to the Interactions panel.
  • Add a Mouse Hover (On Hover) trigger.
  • On hover in, add an animation to hide the default image and show the hover image.
  • On hover out, reverse the animation to restore the default image.
  • Use Opacity or Display as desired in your animation steps (e.g., set default image opacity to 0 and hover image to 100%).

3. Style Your Images

  • Match the size and alignment of both images to avoid layout shifts.
  • Use absolute positioning within the link block if needed to layer the images.

Summary

To change an image on hover inside a link block, either (a) use hover states to toggle visibility between two images, or (b) use interactions for more control. Both methods allow smooth image swapping when the user hovers over the link block.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can regular buttons be used to change tabs in Webflow?
Can I add a click and collect button to my e-commerce store in Webflow, and is there a way to implement a fidelity points system?
Can I choose specific line breaks in Webflow CMS without using Richtext?
Has anyone successfully implemented sticky code on a sidebar using Webflow? I've been struggling to make it work and could use some guidance.
Why is it important for Webflow to add the correct webkit prefixed CSS attribute into their default CSS engine to fix this bug affecting multi-line gradient texts and backgrounds in parent divs on Safari / iOS?
Can I use a CMS image as a background image for a div or section in Webflow?
How can I create a row with 5 columns using Webflow?
Why is a thick gray line being added to some images in Webflow, even though there is no sign of it in the designer?
What are some alternative options to the Soundcloud embed widget for hosting audio tracks on a Webflow site with text and image commentary below?
Is there a way to make the Webflow slider automatically move forward without requiring a click?
How can we redirect users based on their input in the signup form using Webflow?
How can I hide the scrollbar line that appears on my Webflow site when I have a horizontal scroll with Auto on mobile?
Have any of you ever programmatically set up Webflow pilots after sending a form submission to a custom endpoint? If so, do you have any pointers to save me research time? Thank you!
How can I change the color of the visited page link in the navmenu on my Webflow site?
How can I fix a problem where anchor links with query strings are not working correctly when clicked on within the same page in Webflow?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?