Hover through Margin

The HTML is as follows (I'm using React BTW) :

<div className="dragon-sim">
  <img className="iss"
       src="https://spacecraftearth.com/wp-content/uploads/2017/06/ISS-Earth-Mediterranean-2.jpg"
       alt="iss-img"/>
  <div className="heading-section">
    <h1 className="dgs-heading">SpaceX Dragon 2 Simulator</h1>
    <p className="dgs-para">Dock the SpaceX Dragon 2 Satellite to the
      International Space Station in this realtime simulator with the controls
      our astronauts use on their missions.</p>
    <Button variant='outlined' className="dgs-btn"><a
      href="https://iss-sim.spacex.com/">Try Now</a></Button>
  </div>
</div>

The related CSS is as follows:

.iss {
    width: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    transition: all 0.5s ease-in-out;
}

.heading-section {
    margin-top: 250px;
    pointer-events: none;
}

.dgs-heading {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: auto;
}

.dgs-para {
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.iss:hover {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

What I want that the heading section to be centered over the image. The image is at z - index = -1.

The next thing is that the image to be blurred when hovered over. But the problem is that the padding or margin is getting in the way and is blocking the hover effect.

Any suggestion will be welcomed.

Cheers.