Hovering buttons inside heading behaves strangely

Question

I have an introductory paragraph as a heading and inside some buttons, which, on hover, should each show a different image in a different position on the screen.

The problem is that the hover only works if the image would not be in front of the button when it is hovered, although the image obviously isn't in front of the button when you first hover it. But for some buttons I do want the image to be overlaying it a bit on hover.

In this image the branding button is hovered and can be hovered anywhere to work.

Here the image shows only up when the button is hovered on the visible part,

Here's the code:

.button__landing {
  padding: 10px 30px;
  border-radius: 18px;
  background-color: var(--green);
  text-transform: capitalize;
  vertical-align: 19px;
  cursor: pointer;
}

.landing img {
  display: none;
  visibility: hidden;
  opacity: 0;
  position: absolute;
}

.first-img {
  top: 0;
  height: 500px;
}

.second-img {
  bottom: 0;
  right: 0;
  height: 500px;
}

.third-img {
  bottom: 0;
  height: 500px;
}

.fourth-img {
  right: 0;
  height: 500px;
  top: 0;
}

.button__landing:hover+.first-img {
  position: absolute;
  visibility: visible;
  opacity: 1;
  display: block;
}

.button__landing:hover+.second-img {
  position: absolute;
  visibility: visible;
  display: block;
  opacity: 1;
}

.button__landing:hover+.third-img {
  position: absolute;
  visibility: visible;
  display: block;
  opacity: 1;
}

.button__landing:hover+.fourth-img {
  position: absolute;
  visibility: visible;
  display: block;
  opacity: 1;
}

<div class="landing">
  <h1>Hi! I'm 
  <button class="button__landing">Fynn</button>
  <img class="first-img" src="img/fynn-img.jpeg">
  , a junior 
  <button class="button__landing">communication</button>
  <img class="second-img" src="img/substanz_landing.jpg" alt="">
  designer in love with
  <button class="button__landing">screen design</button>
  <img class="third-img" src="img/savo_landing.jpg" alt="">,
  <button class="button__landing">typography</button>
  and all things 
  <button class="button__landing">branding</button>
  <img class="fourth-img"
      src="img/rebooth_landing.png" alt="">
   .</h1>
</div>

Answer 1

There are two things happening here.

1. As soon as the user’s pointer comes over the button, the neighboring image becomes a block element and covers all or part of the button.
2. When the image becomes the uppermost layer, the pointer is no longer hovering the button underneath, therefore the image is hidden again (before you can even see it). Rinse and repeat.

And so you want a CSS selector that keeps the image displayed when the image itself is hovered (I’ve changed the image paths and heights so the effect is more easily visible in the preview):

    .button__landing {
      padding: 10px 30px;
      border-radius: 18px;
      background-color: var(--green);
      text-transform: capitalize;
      vertical-align: 19px;
      cursor: pointer;
    }

    .landing img {
      display: none;
      visibility: hidden;
      opacity: 0;
      position: absolute;
    }

    .first-img {
      top: 0;
      height: 200px;
    }

    .second-img {
      bottom: 0;
      right: 0;
      height: 200px;
    }

    .third-img {
      bottom: 0;
      height: 200px;
    }

    .fourth-img {
      right: 0;
      height: 200px;
      top: 0;
    }

    .button__landing:hover+img, .button__landing+img:hover {
      position: absolute;
      visibility: visible;
      opacity: 1;
      display: block;
    }

    <div class="landing">
      <h1>Hi! I'm 
      <button class="button__landing">Fynn</button>
      <img class="first-img" src="https://www.gravatar.com/avatar/efd428d0fd9eacb2fe96bf5c194f78dd?s=48&d=identicon&r=PG">
      , a junior 
      <button class="button__landing">communication</button>
      <img class="second-img" src="https://www.gravatar.com/avatar/efd428d0fd9eacb2fe96bf5c194f78dd?s=48&d=identicon&r=PG" alt="">
      designer in love with
      <button class="button__landing">screen design</button>
      <img class="third-img" src="https://www.gravatar.com/avatar/efd428d0fd9eacb2fe96bf5c194f78dd?s=48&d=identicon&r=PG" alt="">,
      <button class="button__landing">typography</button>
      and all things 
      <button class="button__landing">branding</button>
      <img class="fourth-img"
          src="https://www.gravatar.com/avatar/efd428d0fd9eacb2fe96bf5c194f78dd?s=48&d=identicon&r=PG" alt="">
       .</h1>
    </div>

Note that there was no need for a separate rule for each image since they all did the same thing, hence .button__landing:hover+img, .button__landing+img:hover which applies to all of them.