Unique z-Index for Collection List Items

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:


And public link:

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;

[slug={{ slug }}] {
  z-index: {{ z-index }};

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

Ohh Genius, thanks I will try it out