On Hover, Button appears on top of map to go to Google Maps

I was looking to have a map where as a user hovers over it, a button appears which redirects the user to Google Maps on the website. I am having trouble nesting things and making the transitions happen. Does anyone know how to do this?


Here is my public share link: https://preview.webflow.com/preview/bizycuts?preview=8190798d10ba661835b9b5da70c6d8c6
(how to access public share link)

Hello @beathoven,

It is how I would accomplish this:

  1. create div (“map-wrapper”), give it position: relative, style block exactly like you styled map;
  2. put map inside the link-block , remove previous styling, give position: absolute, aligning: full;
  3. add link-block inside the div (“map-link”), style the same way like new style for map, BUT with higher z-index.

Now to link you can add any url you want. Hover state you will have to style for link now, not for map.

Regards,
Anna

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.