How NOT to add a new interaction to each item

Hi All,

I have what I thought would be a simple interaction on some cards: On click of a button (+) within an image text image is blurred and text is shown above image.

Like this:
Screenshot 2022-10-26 at 19.47.36

Although the only way I could find to do it was to add a new interaction to each card (if I added to the animation to a class this would effect all cards).

The way it’s set up means it doesn’t work with a collection list :frowning:

Any help appreciated!

Cheers


Here is my public share link

Webflow - Wonder v0.1

@Paul-k - you can change how class based interactions work with other elements that share that class in the interaction setup:

image

image

My guess is that you want to use Only children with this class.

Let me know if that helps,

Sam

Hi @sam-g,

Firstly thank you for helping me.

I tried adding Only children with this class on the first card but that seems to break the interaction?

https://preview.webflow.com/preview/wonder-v0-1?utm_medium=preview_link&utm_source=designer&utm_content=wonder-v0-1&preview=b302e7b840693a12569ee0125a76266f&pageId=63510074b6de2e64c6c51344&workflow=preview

@Paul-k - yea, I looked a bit closer at your structure and I think you need to change it a bit to accomplish what you are looking to do.

In this case you have a parent container careers-intro_profile-item that has two children. The first child, careers-intro_profile-button has the div with the interaction on it. Unfortunately you are not trying to apply the interaction to the child of this div, nor a sibling, nor a parent, which are your only options unless you want to build a bunch of repetitive interactions.

image

My recommendation is to rebuild this element so that your trigger element can interact with the careers-intro_content-wrapper.

Maybe something like this:

image

I moved the interaction to the careers-intro_profile-button-wrapper and set the interaction to siblings.

@sam-g THANK YOU! :pray: That makes total sense I’ve now updated and is working :slight_smile:

One more question for you (feel free not to answer as you’ve already helped me alot!)

In the collection list if the video embed field is populated would it be possible to show the play button on any card (I’ve added to all cards as a default now)?

EDIT: I got the video embed working so no need to answer that :slight_smile:

Thanks again Sam!

1 Like