Z-Index and Lightbox issue


If you have a chance can you look at my link and see what I am doing wrong. I have some “books” under the menu page that when you click it opens then shows you 1 or 2 page menus that you can click on and they zoom out. The issue is that I cannot get the 2nd page to come to center and forefront and the minus sign to close the book works in the preview mode but not on the published mode

Here is my public share link: https://preview.webflow.com/preview/element-parkcity?preview=dcbb806473148a487388e57919b75ea0
(how to access public share link)

Hey @rsilbereis,

For your menu zoom first you shouldn’t use a Lightbox i think. I would use scale transform for this kind of thing, you could easily control and center it on click.

About the minus, try to put the interaction on the minus div directly (right now menu close buttonand middle line for close menu are both absolute, so the div parent you use to trigger the interaction has no height or width)

Finally, take a look at this

Maybe you should try to hide backface on book back face

Now we are here :

Remove the blue background on book cover container

It works better now :wink:

1 Like

Thank you. The issue is that it works in preview mode (the book close) but not on the actual site


Also with not using the light box you think I would have better control if they were just image inserts that zoom click?

Definitely yes @rsilbereis

And yes it’s normal, your div trigger has no height as i explained to you on my previous post (for the minus button).
What is working on Webflow preview is not necessarily the “truth”.

For example i drag a new div.

I see it on the screen, but has no height or width in reality.

Try my fix (add height + width or change the trigger) and it should work

still doesnt work online. I removed the blue. I moved the trigger to the minus sign and I double checked that there is height and width. Still the minus close trigger doesn’t work correctly online


Is it not working or is it not working with the first two ?
I have no idea why but you have 803px bottom here.

As you can see your Navbar overlay your 3d blocks, making the first two minus inaccessible (your Z index is 1000).

You should really consider cleaning before going forward i think, or make this 3d block work on a blank page.

its odd. on the live site the first menu opens and to close it you have to click the minus sign in menu 2 or 3 or 4 then menu 2 the same to close it you have to hit the minus sign in 3 or 4 although it works fine in preview mode

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.