Stacking Portfolio

Hi Webflowers,

I am looking to recreate the (https://enid.fm/) functionality of this “stacking” portfolio.

All info would be pulled from CMS, however I am struggling to understand how to configure the Z-index for this application. It would need to change for each CMS item imported into the grid?

Any feedback or advise would really be appreciated.

Thank you so much!,
Cahil


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

@Cahil_Sankar - you may be able to accomplish this with some custom code. You could add a number field to your CMS items called Stacking Order.

You could place the stacking order in an html embed using something like this:

<div id="item-name" data-stacking-order="stacking-order" class="portfolio-stacking-order" style="display:none;"></div>

You can pull cms references into HTML embeds. So you’d pull those values in for the id and data-stacking-order properties.

You could then loop through each div with the portfolio-stacking-order class, get the element id and the data-stacking-order value and set the z-index for each item using that value.

There might be an easier way, but nothing is coming to mind immediately.