I’m trying to design a staff page where thumbnails have a hover overlay, and when clicked their bio appears in a modal. I was hoping to have one set of interactions (hide on load & trigger) that I could apply to all the modals by having them apply only to the child of trigger class.
As you can see in the link, the subsequent thumbnails are overlapping the modal. I think this is because the modal wrapper (with fixed position and z-index of 9999) is within a parent with a Z-index of 1, it’s displaying below the subsequent elements in the stack. Any suggestions on how to make this work without pulling the modal wrappers out of the parent and creating separate sets of interactions for each of the dozen staff members?
Any help would be appreciated. Thanks,