How to change image based on interaction with a Collection List

Design help General
1

Hi there!

I have a CMS list set up, and a Collection List which references this. See the Project rows in the image sample below to see how the Collection List works.

Webflow%20Help_v01
Webflow%20Help_v011389×871 89.4 KB

Webflow%20Help_v02
Webflow%20Help_v021389×871 94.3 KB

What I would like is for the image to change based on which collection list item has been either clicked or hovered over - I’ll just say “interacted with” for now. For example, I have Project 1, Project 2, Project 3 etc. I want the image above to transition to be directed by the CMS, and to change to the currently selected (or last interacted with) Collection List item. If I Interact with Project 2, the image above should transition to showing an image from Project 2 in the CMS.

My attempts so far haven’t been successful, the closest I’ve got has been a paginated slideshow. The issue being that that it isn’t dynamically linked to the list and isn’t driven by interactions etc.

Any help or pointers would be much appreciated!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I am working on something similar, and haven’t found a solution yet.

My project is a finishes selector for a real estate development, the goal is to have someone select a material pallet from a collection list and in the same view see a rendering of the room update with another rendering with the selected material pallet.

What I have is a CMS list of the pallets with that pallet’s rendering and description.
The list is then put into an scrolling overflow div for selection. When a pallet is selected it unhides a container with absolute positioning over the old rendering with the pallet / collection item’s rendering. The same happens for the description.

This is the hierarchy:
image

Untitled-1
Untitled-11066×856 116 KB

Using interactions I’ve got this to work, but, it only works going down the list sequentially, each later rendering gets placed on top of the last, and when I close the overlay div it only closes the top (highest z) at a time. I even have each new pallet selector in the list hide the overlay and the rendering. Then unhide it.

So one can select later pallets and they show up, but earlier ones are stuck behind (z position) the later ones.

I’d love to be able to do this with a collection list, I know I could do it manually and have each pallet have their own button and their own overlay, but would love to find a smarter way to do that.

Any suggestions would be great, thank you!

https://preview.webflow.com/preview/arete-bend?utm_medium=preview_link&utm_source=designer&utm_content=arete-bend&preview=94a90c23cab593b340cf4e92af1297e4&pageId=61c10b69b1765f70172c21ee&workflow=preview

Update :

I figured my problem out,
Found out that interactions can apply to different parts of a family.
On the overlay popup, interactions are applied to only children of this class.

image
image236×893 18.8 KB

And on the closing interaction, interactions are applied to all elements in this class.

image
image238×895 18.9 KB

This closes all overlays, so on click for the collection item first an interaction that closes all overlays, then slightly after an interaction that opens children of just that class.

Idk if that makes any sense lol, but here is a video that helped me figure that out (its for hovering)

Cheers!