How to: Hover over item from one collection list hide/shows another collection list item

Design help Animations & Interactions
1

I’m trying to create an effect where an image from a collection item hide/show as visitors hovers the cursor each item similar to the project section in this website:

I’m trying to recreate it for my wellness studio as shown below. I’m having trouble figuring out the best way to recreate it. I’m not sure if I should have 2 separate collection lists both linking to the same source layered on top of one another because I can’t seem to get the alignment right when they are under the same collection list. Also is it possible to have 1 collection lists interacting to a corresponding item that us under another collection list?

Any suggestions would be helpful. Thank you.

Screen Shot 2021-10-07 at 4.29.17 PM
Screen Shot 2021-10-07 at 4.29.17 PM648×858 119 KB

Here is my public share link: LINK

2

hi @derrickfoo you can get basic idea how to in this YT video and customize it to your needs.

3

Thanks you so much! The video solved everything. :pray:

1 Like
4

hi @derrickfoo if you do not have further questions to your request feel free to close your request as solved. :wink:

5

Awesome Video @Stan thanks for sharing this.