Unique z-Index for Collection List Items

Design help General
1

In this example, I use z-index to stack images and Webflow’s built-in interaction set to ‘while scrolling in view’ to display the images with opacity and scale. This works fine as long as I can control it manually. Do you have any ideas to achieve the same results if the images are from a collection list?

Thank you for your help!

Here is my site Read-Only:

https://preview.webflow.com/preview/Scroll-interaction-test-stack?utm_medium=preview_link&utm_source=designer&utm_content=Scroll-interaction-test-stack&preview=3c379c22c75a1399b4b82b1d5fd5bc97&workflow=preview

And public link:
https://scroll-interaction-test-stack.webflow.io/

2

Yes, here’s the basic flow;

To the CMS collection-

  • Add an z-index field, as a number
  • Populate it with the z-index you want for each item in the collection

To your page-

  • Add the collection list and bind it
  • Add your cards inside of it
  • To the Collection Item ( purple element, the innermost one of the 3-part collection list ), add a custom attribute, let’s call it “slug”, and you’ll CMS-bind the value to the item’s slug

This gives you a unique identifier for each item, to style it.

Then within the CMS item, drop an HTML embed with the CSS you want;

<style>
[slug={{ slug }}] {
  z-index: {{ z-index }};
}
</style>

The {{ }} constructions are embedded fields- click add field in the top right of the HTML embed window to add those.

3

Ohh Genius, thanks I will try it out