+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: Dynamic library background image (/t-dynamic-library-background-image)
Dynamic library background image - Cronus - 2025-07-12
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?
RE: Dynamic library background image - SethBacon - 2025-07-12
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);
}
RE: Dynamic library background image - Cronus - 2025-07-13
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.