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