Help with complex hero interaction

Hi there,

I’m trying to create an interaction where the hero’s background image changes based on the relevant dropdown hover state. So far, it works ok when hovering on and off the individual dropdown buttons…

However, I’m running into two issues:

  1. While hovering off, the dropdown content seems to quickly stretch and then quickly come back up which is a bit jarring.

  2. When you hover from one dropdown directly to the other it quickly shows the default image which also looks quite jarring.

Can anyone help suggest a better way to set this up to ensure a smoother transition?

Here’s a quick Loom video describing this in further detail:

Here is my public share link: LINK
(how to access public share link)

hi @joyfloBec the best way to get help is to follow the forum post guide.

When posting please:

  • Required: Share your project’s Read-Only link and live site’s Published link
  • The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the subdomain where you can view the live site with custom code running. It is IMPORTANT to share this link, as custom code (eg. javaScript) does not run in the Designer.
  • Describe issue in detail including what page, section and/or element is localized
  • Upload as many screenshots as possible or provide screencast videos to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this: @forumMemberName