I’m looking to create a “cover” that is initially visible over my map embed on certain blog posts.
It needs to be grey, but transparent so you can see the map below it, and then say on it “click to interact with map”.
Then, when tapped it disappears and the user can interact with the map.
The problem I currently have is that the map is immediately interactive, meaning that when people scroll down the page, they already scroll the map by mistake, and can even get stuck scrolling on the page.
I’ve tried playing around with different ideas, like putting the map embed inside of a div, and then adding another div with position of “absolute”, but can’t seem to get it to cover the map.
Any idea would be much appreciated!
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=5dcaa062375b7c3e133a80a8&mode=preview
You can find the embed in question by heading to:
- “blog posts template” page
- head to an item that actually has the map. such as “3 week vietnam itinerary”
- You will see the map as you scroll down the page, and it is within the div titled “holder for travellers point map embed”
Here’s an example of a published blog post with the issue:
Thanks in advance for any ideas and help!