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
Best,
Christopher
