How to make links accessable together with the CSS property mix-blend-mode?

Question

I have an unsorted list of links that are filling much space of a rectangular area. I want the text of that list beeing transparent to an image behind. I have tried with the following code:

@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

.navigation {
  background-color: black;
  list-style: none;
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
  position: relative;
}

.image-navigation {
  height: 100%;
  left: 0;
  mix-blend-mode: darken;
  position: absolute;
  top: 0;
}

.link-navigation {
  color: white;
  display: inline-block;
  font-family: "Anton", sans-serif;
  font-size: 7rem;
  letter-spacing: -4px;
  line-height: 0.9;
  overflow-y: hidden;
  text-decoration-line: none;
  text-transform: uppercase;
}

<nav>
  <ul class="navigation">
    <img class="image-navigation" src="https://images.pexels.com/photos/15286/pexels-photo.jpg" />
    <li>
      <a class="link-navigation" href="#">Link 1</a>
    </li>
    <li>
      <a class="link-navigation" href="#">Link 2</a>
    </li>
    <li>
      <a class="link-navigation" href="#">Link 3</a>
    </li>
    <li>
      <a class="link-navigation" href="#">Link 4</a>
    </li>
  </ul>
</nav>

But the problem is the links are not accessable. When I set the position of the links to relative, the image is not visable. Setting a value for the z-index property of both the links and / or the image does not work either.

Can someone help?