Dynamic library background image

[democrat2]

I'm looking to fix my library dynamic thumbnails. I adopted  @NanoNano CSS solution for showing an avif file on hover and focus, I fell in love with it and have now gone on a personal crusader despite my complete inexperience with web development to fix the issues I have with the current solution. First, the first time it loads it dissappears before the image has rendered i assume, second it doesn't restart when stopping hovering and re-hover, if possible i also don't want to reload the image to waste resources. I have tried the usual suspects like stack overflow to find a css/html/javascript solution and even some vibe coding without success. Is there anyone who can point me on the right direction?

[SethBacon]

I liked Nanos post too, heres the code they had originally: .card[data-id='0c31907140d8021217e2cd79e123']:hover .cardImageContainer, .card.show-animation[data-id='0c31907140d8021217e2cd79e123 ']:focus .cardImageContainer { background-image: url("/Items/0c31907140d8021217e2cd79e123 /Images/Logo?maxWidth=480&tag=0c31907140d8021217e2cd79e123 &quality=90") !important;}

---

To fix your concerns:
Preload the image (to avoid flicker on first hover)
<img src="/Items/0c31907140d8021217e2cd79e123/Images/Logo?maxWidth=480&tag=0c31907140d8021217e2cd79e123&quality=90" style="display:none;" />



Use a pseudo-element overlay instead of reloading the image: keep the image always loaded in CSS, and animate opacity or transform on top instead of replacing the background.

.card[data-id='0c31907140d8021217e2cd79e123'] .cardImageContainer {
    position: relative; /* Make sure it can contain the pseudo-element absolutely */
}

.card[data-id='0c31907140d8021217e2cd79e123'] .cardImageContainer::after {
    content: "";
    background-image: url("/Items/0c31907140d8021217e2cd79e123/Images/Logo?maxWidth=480&tag=0c31907140d8021217e2cd79e123&quality=90");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
}

.card[data-id='0c31907140d8021217e2cd79e123']:hover .cardImageContainer::after,
.card.show-animation[data-id='0c31907140d8021217e2cd79e123']:focus .cardImageContainer::after {
    opacity: 1;
    transform: scale(1.05);
}

[democrat2]

Worked beautifully, however, position: relative; seems to make the normal background disappear, removing it doesn't show any noticeable difference except for the normal background now being back

I take it that restarting the gif/avif animation for each rehover might be a problem of too many constraints, as all solutions i have found is to reload the image.