How to create a click to reveal cover

Hey guys

For certain posts on our site we have an embeded map, however as the user scrolls down, the map automatically starts moving when the cursor is over it.

Does anyone know how I would go about creating a sort of mask that covers the whole embeded map and has to be clicked before the user can then interact with the map?

To find the elements, if you head to “blog posts template” and then view a blog post like “3 week sri lanka itinerary” which has the map in there.
As you scroll down you will see it near the top.
Within the div titled “holder for travellers point map embed” I have put in a new div that can act as the cover, but I’ve made it not visible for now.

I would appreciate any thoughts on the matter and any help!
Thank you!

here’s my read only: https://preview.webflow.com/preview/dream-big-travel-far?utm_medium=preview_link&utm_source=designer&utm_content=dream-big-travel-far&preview=ae94492a4e1e5739839b451433453663&pageId=5d39820f3956d21a7c2ffb01&itemId=5e2c2f6aba7fff3e52997229&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi

Is that what you are trying pro achieve?

https://www.loom.com/share/fcd4052d0df84ea39b50e7e6da73db2e

Yes exactly! :slight_smile:
How do I do that please?

Use interaction. In this case I used predefine interaction (slide out) but uit is recommended to use custom interaction for better results.

https://www.loom.com/share/82d722a528c04fa8970239938bf95a77

Thank you for that!
I followed the steps, unfortunately, after clicking to have it disappear on the live site, it now means that you cant fully interact with the map.
Did you face this issue as well?

Thank you so much for your help so far! :smiley:
Bradley

Okay so I went ahead and tried it a new way using the custom interactions and you were right it’s much better :slight_smile:
Got it fixed.

But thank you again because I couldn’t seem to work out the correct positions of the different elements in order to make the box fully cover the embed :slight_smile: