Hide circles in the background

Hello everyone,

I created a page with a few circle sections.
Everything looks ok to me except one thing:

When I click on one circle the section opens and shows the content but I want to not be able to interact with the other section and press the outside area to close the section.

Any suggestion on how to do it?
I tried create an overlay behind each section but it’s not working to be because I’m not able to change the Z-index of an element with an interaction.

Any suggestions will be very much appreciated :smiley:

This is the oage: https://vikasayoga.webflow.io/bangkok

Thank you so much in advanced for all the help :slight_smile:

Best Regards,
Alex

Hello @Alex_Afonso,

Welcome to the forum. Man that is a great website, really cool UX/UI and unique design. What I would suggest you to try is to change the z-index on hover, so when the user hovers over any circle the z-index would be higher and then when they click an overlay with position fixed opens up behind the info but on top of the other circles, and that same overlay will close the info when clicked. I hope this makes sense.

Hi @Pablo_Cortes

Thank you so much for your reply and kind words :smiley:

I implement your suggestions with a fresh look at it and I kind I did it :smiley:

I had the Z-index changes on hover but what was missing was adding the overlay inside each section in order to hide the other sections.

I believe I achieve the results I want it :slight_smile:
If you refresh the page might looks better now.
It’s on this link now: https://vikasayoga.webflow.io/

Thank you so much again :wink:

1 Like

Hey @Alex_Afonso, you are very welcome. That is great man, the whole site is looking and feeling great. Great job.