onHover effect on ReactMapGL not scaling properly

[Jay-Bruh]

Currently I'm trying to replicate this hover effect of this website on my map component: http://www.francoisrisoud.com/projects where basically when you hover over a dot, it brings up a full screen image and when you click on it, it'll take you to a particular page. Currently this is my React and CSS code:

export default function Map({posts}) {
    const [viewport, setViewport] = useState({
        latitude: 36.592206968562685,
        longitude: 3.332469343750031,
        width:"100%",
        height:"100vh",
        zoom: 1.3,
    });

    const [selectedProperty, setSelectedProperty] = useState(null)

  return (
      <div>
        <ReactMapGL {...viewport} mapboxApiAccessToken="//myAPIkey"
        mapStyle="mapbox://styles/jay/cks5xkaa892cp17o5hyxcuu0z"
        onViewportChange={viewport => {
            setViewport(viewport);
        }}>
        {
          posts &&
          posts.map((maps) => (
            <Marker key={maps.id} latitude={maps.Latitude} longitude={maps.Longitude}>
                {/* <div>{maps.Title}</div> */}
                <button className="marker-btn" onClick={e => {
                    e.preventDefault();
                    setSelectedProperty(maps);
                }}>
                    <img src="placeholder.svg"/>
                </button>
            </Marker>
          ))}

          {selectedProperty ? (
              <Popup latitude={selectedProperty.Latitude} longitude={selectedProperty.Longitude} 
              onClose={() => {setSelectedProperty(null);}}>
                <h1>{selectedProperty.Title}</h1>
              </Popup>) : null}
        </ReactMapGL> 
      </div>
    );
}

CSS:

.marker-btn{
  background: none;
  border: none;
  cursor: pointer;
}

.marker-btn :hover{
  background: #000;
  width: 100vw;
  height: 100vh;
  border: none;
  cursor: pointer;
}

.marker-btn img{
  width: 20px;
  height: 20px;
}

But when I hover over the Marker in my map this is the result I get:

I want it so that it covers my whole map and not just start from the point where I'm hovering. Additionally, if I hover out of it I want it to go away but when I drag my cursor towards the big popup, it doesnt go away.