image to appear when the cursor passes over a link

I want an image to appear when the cursor passes over a link.
I inserted this CSS code :

.survol-hover-title {
  display: inline;
  pointer-events: auto;
  cursor: pointer;
  font-family: helvetica;
  font-size: 24px;
}

.survol-hover-image {
  display: none;
}

body:not(.mobile) .survol-hover-title:hover + .survol-hover-image {
  display: flex;
  pointer-events: none;
}

.survol-hover-image {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Change width and height to scale images */
  width: 95vw;
  height: 95vh;
}

.survol-hover-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  margin-bottom: 0;
}

And this HTML code to display V11.jpg image when I hover over the link V11:

In Preview mode, the display corresponds well to my expectations.
However, when I synchronize my site, the image is always displayed, under the link.
Would you have an explanation and a solution?