Hover 通过保证金

Question

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

 .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); }

 <div class="dragon-sim"> <img class="iss" src="https://spacecraftearth.com/wp-content/uploads/2017/06/ISS-Earth-Mediterranean-2.jpg" alt="iss-img" /> <div class="heading-section"> <h1 class="dgs-heading">SpaceX Dragon 2 Simulator</h1> <p class="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' class="dgs-btn"><a href="https://iss-sim.spacex.com/">Try Now</a></Button> </div> </div>

What I want is 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.

Answer 1

Possibly this is what you're lopoking for. Remove pointer-events: none; and change the position: absolute; to the .heading-section instead of the image. As well as add this code:

.dragon-sim {
  position: relative;
  text-align: center;
}

Here's a working example (I changed className to class just for this example to run, just change it back for react)

Edit: Add this to your CSS to get a blur even when hovering over the header.

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

Example here:

 .iss { width: 100%; z-index: -1; transition: all 0.5s ease-in-out; }.dragon-sim { position: relative; text-align: center; }.heading-section { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }.dgs-heading { color: white; font-family: Verdana, Geneva, Tahoma, sans-serif; margin: auto; }.dgs-para { color: white; font-family: Verdana, Geneva, Tahoma, sans-serif; }.dragon-sim:hover.iss { -webkit-filter: blur(5px); filter: blur(5px); }

 <div class="dragon-sim"> <img class="iss" src="https://spacecraftearth.com/wp-content/uploads/2017/06/ISS-Earth-Mediterranean-2.jpg" alt="iss-img"/> <div class="heading-section"> <h1 class="dgs-heading">SpaceX Dragon 2 Simulator</h1> <p class="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' class="dgs-btn"><a href="https://iss-sim.spacex.com/">Try Now</a></Button> </div> </div>

Answer 2

First, please indent your html code when asking for question.

try the following to center .heading-section

.heading-section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 3

If you change the .heading-section to position: absolute , and pointer-events: none , the hover will pass through to the underlying image.

View this in full page mode:

 .iss { width: 100%; z-index: -1; position: absolute; left: 0; top: 50px; transition: all 0.5s ease-in-out; } /* heading overlay: use absolute positioning */.heading-section { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; /* passes hover to img */ }.dgs-heading { color: white; font-family: Verdana, Geneva, Tahoma, sans-serif; margin: auto; }.dgs-para { color: white; font-family: Verdana, Geneva, Tahoma, sans-serif; } /* override "pointer-events: none" to allow button click */.dgs-btn { pointer-events: auto; }.iss:hover { -webkit-filter: blur(5px); filter: blur(5px); }

 <div class="dragon-sim"> <img class="iss" src="https://spacecraftearth.com/wp-content/uploads/2017/06/ISS-Earth-Mediterranean-2.jpg" alt="iss-img"/> <div class="heading-section"> <h1 class="dgs-heading">SpaceX Dragon 2 Simulator</h1> <p class="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 class="dgs-btn" onclick="alert('click')">Try Now</button> </div> </div>

Answer 4

You need to have a wrapper which contains both the image and the header and, when that wrapper is hovered on you then blur the image.

Naturally you can centre the heading-section in the way Kevin mentioned.

So based on what I said my solution would be, same html and the css would become something like:

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

.heading-section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.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);
}

.dragon-sim {
    position: relative;
}

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

This seems to be doing what you wanted, it blurs the image but not the text and you can still interact with the text and button no problem.

Also the text is not very readable I would suggest putting some transparent background for the heading-section

Also note that I removed the pointer-events: none; as that is no longer necessary, plus with that you would not be able to click the button, so you definitely do not want to use that property