[clac1]

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:

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?

[candidexmedia]

Strange… what are you seeing when you inspect the element in your browser?

Is there a live page that you could share for us to take a look?

[clac1]

You are right, it is very strange. Especially now that it works, after a resynchronization of my site.
The page is here: https://lumiere.click-clack.fr/les-foldings.html

The issue was on “Viseur(s)”

[candidexmedia]

Hmm, well glad it fixed itself!

[Author]

Posts