I have a section on my site with “books” that when you click on them open to show to jpeg menu examples. When you hover over a menu it zooms in however I cannot it get the jpeg to come to the forefront. Ideally I would prefer this to be a second click to bring the menu forward so that it can work on mobile devices as well. Here is what I would like to figure out
If it has to stay on hover how to get the jpeg to mover in front of the other items setting the z-index didn’t work
or
Make it a second click function. Click 1 opens the book and I would remove the second click and instead have ax or something inside to close the book
Second Click brings the ligthbox jpeg to the forefront next click scales it back down
So I worked out the option 2 using click to open and a second click on a button to close now I just need to get the jpeg images to come to the front when clicked using the z-index I think?
I have worked out on the sample menu page to 1 click and the book opens 2 click and the menu to the right comes to the front click it again and it returns to origin. Click on the menu on the left and it works however the 2 menus seem to be competing with each other and I have not figured out how to get the menu you click on to be the priority menu
In addition my click to close minus hamburger only semi works if I have it set to the bookcover container it does nothing if I remove the effect nested then it effects all covers which is not what I want…
try this. I don’t think the opacity will work… I need to be able to get the close (-) button to work and for the left menu to come to the front when clicked like the left menu does
I noticed you had the “limit to nests elements” selected
This option would only work if the class selected was nested inside of the close button.
Once you uncheck this box, your close button works. However, It will close all books simultaneously if multiple are open.
As far as the image issue you are having, it looks like you are trying to build a custom lightbox. It may be easier to use the lightbox element for this since there are so many moving parts already. Just a thought!
Okay so I tweaked some things but I am still having issues with the lightbox. I took your advice and removed the custom lightbox and just added the lightbox element however it doesn’t do anything when I click on the photo of the menu. I added an interaction to scale up but that gives me the same issue where it does not scale in front of everything else…
