hover images appearing (pre-loading?) on corner of page

[MartinRL]

Hello,

something strange happens on all the pages where I use hovering images. Whenever you open or refresh the page, for the fraction of a second (but noticeable) those images appear on the top left corner. I haven’t enabled "pre-load hovering image", btw.

https://martinrobertlutz.de/de/index/
https://martinrobertlutz.de/de/info/

Here are screengrabs, in case you can't see it in your browser:
https://martinrobertlutz.de/wp-content/uploads/2025/02/Ohne-Titel1.mp4
https://martinrobertlutz.de/wp-content/uploads/2025/02/Ohne-Titel2.mp4

In the second video (index page, which has several hover images), if you look closely frame by frame you can see that it looks like several (or all?) of them are stacked on top of each other. This is what it looks like:

It can’t be cache related, as people who have never been on my website before are experiencing it. Any idea what's happening there?

Thanks!
Martin

[arminunruh]

does it also happen if u turn off your custom css?

[arminunruh]

u need to remove this css:

.lay-imagehover-on-element {
    transition: opacity 500ms ease;
}

instead use this css

.lay-imagehover-on-element.transition[data-transition=fade2] {
  transition: opacity 500ms ease!important;
}

.lay-imagehover-on-element.transition[data-transition=fade] {
  transition: opacity 500ms ease!important;
}

yes, this wont let them fade out, only fade in, they will hide immediately
i dont really have time to make them fade out :D

[MartinRL]

With custom css disabled, it doesn't happen, as you assumed.

Thanks for the code, it DOES solve the problem, and the fade-outs are a fair tradeoff!

Thanks for the wizardry so far :-)

M.