Changing Image on hover

Design help Animations & Interactions
1

Hi! I’m looking for a bit of help with an interaction i’m building. I’m wanting the image on the right to change when i hover over any of the project on the left. I’m sure i’m missing something but can’t quite figure out what.

The main issue i’m facing is link the projects on the left to the correct image on the right.

Here is the section i’m referring to:

Screenshot 2025-02-19 at 5.29.54 PM
Screenshot 2025-02-19 at 5.29.54 PM1920×1198 99.2 KB

Also if anyone know how i can get the first item in the collection list to be the initial state on load would be amazing!

Here is my public share link: Webflow - Klix New

1 Like
2

Hi Fin, here’s the approach I use-

3

Hi Michael,

Thanks so much for the reply. That tutorial is very informative. Do both parts inside of the collection list and the default expando outside of it need to be identical for this work ?

4

Webflow does not natively have a way to sync the interaction across collection lists, so the Expando design you see in the cloneable is in a single collection list.