Dynamic library background image

[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);
}