Hover one affect another problem

Design help Animations & Interactions
1

Hello friends!
Need your help🙏🏻

Here`s the interaction I want:
Hover on link in Dropdown menu (phone, work, meet) and image changes accordingly.
In perfect variant I would like to make animation by moving pictures (like slideshow)

https://preview.webflow.com/preview/anastasias-superb-site-5687da?utm_medium=preview_link&utm_source=designer&utm_content=anastasias-superb-site-5687da&preview=f0866bad8840580d8bec98f769b08345&workflow=preview

2

First I would like to recommend to learn Client-First, then you could achieve that effect if you have 3 images on the .div-child (separately) you would have something like this: .div-wrapper > .div-child.

On the interactions: Create opacity to 0% on the .div-child as starting stage and then 0.5ms ease to 100% opacity, do the reverse for hover out (without the starting stage).