Streaming live at 10am (PST)

Z-index not working with layered image


#1

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

1) 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
1) 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
2) Second Click brings the ligthbox jpeg to the forefront next click scales it back down


Here is my public share link:
https://preview.webflow.com/preview/element-parkcity?preview=6cf0cc0ce45935328595eadd2d121f52


#2

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?

https://preview.webflow.com/preview/element-parkcity?preview=6cf0cc0ce45935328595eadd2d121f52


#3

Final update

@cyberdave or anyone who can assist

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...

https://preview.webflow.com/preview/element-parkcity?preview=dcbb806473148a487388e57919b75ea0


#4

Hey @rsilbereis!

Your share link wasn't working, but here is one possible solution:

1) Position the image where you want it to be when the "book" is clicked
2) Set the initial appearance in the interaction to display: none and opacity: 0%
3) Set the click trigger on the book to affect different element and select the image.
4) Finally set the interaction to display: block, then opacity 100%

You can use opacity if you'd like or just have it pop up with a scaling effect– personal preference!

I hope this helps! :slight_smile:

If you need any clarification let me know!


#6

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

https://preview.webflow.com/preview/element-parkcity?preview=dcbb806473148a487388e57919b75ea0


#7

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!

Cheers!


#8

Yes I tried it without the nested option and then it makes even the closed books jump (text) I am not sure why that is happening


#9

scratch that I fixed it by changing the position of the text


#10

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...

https://preview.webflow.com/preview/element-parkcity?preview=dcbb806473148a487388e57919b75ea0


#11

I sent you a message :slight_smile:


#12

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