Hover one affect another problem

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)


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).