Help layering four divs of equal importance with the same z-index?

Here are four divs that I’d like to have fluidly expand to 100% width upon click, revealing the fuller image. Please ignore unrelated stock imagery:

Once expanded, a white pane would rapidly pan in with the relevant content and links to other pages. There’s one issue, though, and that’s with z-index values of the siblings forcing them to appear on top of the expanded element. This problem could be avoided if I were able to edit z-index values via interactions (upon click, I’d set the clicked element’s z-index to a greater number then set it to expand fluidly).

So, is there another way to accomplish this effect that isn’t too clunky? I tried making a hidden clone of the element with a pre-set high z-index value, but it slowed down my web page and interaction fluidity. It’s also illogical to totally duplicate the element just to create this one effect. The closest I was able to get was altering the z-index upon click-and-hold, but that does not hold upon release.

Any guidance or ideas appreciated. I cannot provide preview link for this project.

I’ve posted the ability to edit z-index as an idea on the Webflow Wishlist. Please vote if you relate to this annoyance: Enable z-index editing via Interactions | Webflow Wishlist


1 Like

Hey @ctrav

Can you share your read-only link?

Piter :webflow_heart:

I will DM you with the link.

I was able to get this working by triggering the sibling elements to resize to width 0 during the Interaction rather than staying stagnant and getting overlayed. It’s a different effect, but quite similar and accomplishes the effect I’m looking for.

1 Like

Hey man! Sorry for the late response! Happy you did it :raised_hands:

1 Like