Hovering a div to change an image

Design help Animations & Interactions
1

Hello guys,

I would like the right image to change when i hover the div of cities on the left.

When i hover the Paris div, there is a photo of Paris
When i hover the Miami div, there is a photo of Miami etc…

Do you know how to proceed ?

Thanks a lot !

Here is my public share link: Webflow - Ward Group

2

Can anyone answer this question? I’m looking for someone to answer because I have the same question. If anyone has solution, please tag me. Thanks a lot.

3

Can anyone answer this question? I’m looking for someone to answer because I have the same question. If anyone has solution, please tag me. Thanks a lot.

4

I think you can use interactions to do this, like add a unique class to each city div (e.g., “paris-div”, “miami-div”). Then add an image element for each city image on the right and set them to “hidden” initially.

Next go to the interactions panel, create a new interaction for the “paris-div” to show the Paris image on hover and hide it on hover out. Repeat this for each city div and corresponding image.