Streaming live at 10am (PST)

Trouble with interactions in a dynamic list


#1

Hi, I am having problems getting interactions to work within a dynamic list. They work on the components outside of a list but when placed in they go a bit screwy.

Is this a known limitation, or more likely have i missed something out. The only difference I can see is that the interaction is on a link block that now sits inside of a list item container that itself sits inside the dynamic wrapper. neither elements should effect the interactions which are targeted at two divs inside the link block.
One is scaling a background element on hover and the other is displaying a colour overlay on hover.

Cant put a link up as still working on site.


Here is my public share link: LINK
(how to access public share link)


#2

Hi @johnminshall,
This can be achieved using layers:

Wrapper Div: set to relative position, overflow hidden;

Inside:
- Background image: Set to absolute position
- Overlay: set to absolute position

Create your interaction on the Wrapper Div and set it to affect the image and/or overlay. Limit it to nested elements.

This should help you to achieve the result. For further help, please post https://help.webflow.com/article/how-do-i-share-my-sites-read-only-linkyour preview link:


#3

Thank you, I'll give it a try.


#4

@nita_design thank you for trying to help unfortunately changing the relative positions didn't work. I have shared the link below now if anyone can have a look and see what might be causing the interactions not to work.
I have tested them outside of a dynamic list and they work exactly as expected so I am thinking its something to do with this.

Many thanks

https://preview.webflow.com/preview/scottyspots?preview=78822b169c2b769cd696a93cc168f608


#6

Hey @johnminshall

There are a couple of things that you have to fix and the interaction will work fine. Check out the the video I made explaining the fixes.

And here are the steps:

1- Make sure both the .bg and .overlay are nested in .main-links like this:

2- Add position: relative to the .main-links

3- Add position: absolute z-index:222to.overlay

4- Go to the interaction and add check the limit to nested elements checkbox.

The interaction should work fine.

Please, let me know if this is helpful. If not, I'm happy to help further.

All the best,
Anna K


#7

Thank you very much.

John.


#8

Anytime @johnminshall

Best of luck with your project,
Anna K