this-is-just-to-say

<body>

  <div class="poem">

    <p class="titel">this is just to say</p>

    <p> I have eaten<br>
      the <span id="plum">plums</span><br>
      that were in<br>
      the icebox
      <p />

    <p> and which <br>
      you were probably<br>
      saving<br>
      for breakfast
      <p />

    <p>Forgive me<br>
      they were delicious<br>
      so sweet<br>
      and so cold</p>

    <div id="autor">
      <em>
        William Carlos Williams
      </em>

    </div>

    <div class="bild">
      <img src="https://media.poetryfoundation.org/uploads/media/cache/default/0001/22/b1538427e0ee77471a396be295eb85b4baa27e5a.jpeg/d465730f176b49f69ae9c39e3ff14468">
    </div>

  </div>

</body>

index.html

html {
  background-color: #ba92ff;
}

body {
  text-align: center;
  color: black;
  font-family: helvetica;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

#plum {
  color: #ba92ff;
}

.titel {
  font-size: 0.5rem;
  text-transform: uppercase;
}

#autor {
  font-size: 0.5rem;
  text-transform: uppercase;
}

#autor:hover + .bild {
  opacity: 1;
}

img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;

}

.bild {
  padding-left: 5vw;
  padding-right: 5vw;
position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 500ms ease;
}

index.html

index.css