In need of a collection library thumbnail

[Skytbest]

The CSS:

Code:

/* ANIME */
.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;
}

Change the ID to your own library ID using inspect element in web browser.
Upload the transparent (PNG / GIF) for the label as "Primary Image" if u wish a label.
Upload the Animated image (GIF, WEBP, AVIF) as "LOGO" for the animation.
in my case i use AVIF because is smaller in size, just rename the file to jpg.

This is very cool. I'm wondering if you know whether it is possible to do something similar but with the video thumbnails themselves and not the library thumbnails.
Basically I want the video thumbnails in my library to "come alive" similar to how you have it when you mouse over the Library. I want it to start playing a preview of the video in the thumbnail before selecting the video. Similar to youtube or other video sites.
It's fine if this is just a slideshow of stills from the video too. I'm thinking since Trickplay is already a thing that compiles stills from your video can you utilize those images to play on the thumbnail at the video selection screen instead of in the video scrubber?

If i understand correctly what u wanted then, Just put the image into the each folder, in your case thumb.jpg (avif), for example u can try the demon slayer image i posted above and save is as thumb.jpg put it into your one of your movie/series folder.

The CSS:

Code:

/* ANIME */
.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;

}

Change the ID to your own library ID using inspect element in web browser.

Upload the transparent (PNG / GIF) for the label as "Primary Image" if u wish a label.
Upload the Animated image (GIF, WEBP, AVIF) as "LOGO" for the animation.

in my case i use AVIF because is smaller in size, just rename the file to jpg.

This is very cool. I'm wondering if you know whether it is possible to do something similar but with the video thumbnails themselves and not the library thumbnails.

Basically I want the video thumbnails in my library to "come alive" similar to how you have it when you mouse over the Library. I want it to start playing a preview of the video in the thumbnail before selecting the video. Similar to youtube or other video sites.

It's fine if this is just a slideshow of stills from the video too. I'm thinking since Trickplay is already a thing that compiles stills from your video can you utilize those images to play on the thumbnail at the video selection screen instead of in the video scrubber?

Layout

I'm very interested on how you generated these! I would love to apply it to all my libraries. Would you mind sharing more or how?

U can easily create those from any video files save it as .avif to reduce the size then just rename it as .jpg to be recognized by jellyfin.
in my case i use photoshop to edit the video.

more posters:

Show Content

Spoiler

I want a moving thumbnail for each video and I have several video files per folder so how could that work if I just name it "thumb.jpg"? I need a jpg for each video in the folder.

[NanoNano]

The CSS:

Code:

/* ANIME */
.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;
}

Change the ID to your own library ID using inspect element in web browser.
Upload the transparent (PNG / GIF) for the label as "Primary Image" if u wish a label.
Upload the Animated image (GIF, WEBP, AVIF) as "LOGO" for the animation.
in my case i use AVIF because is smaller in size, just rename the file to jpg.

This is very cool. I'm wondering if you know whether it is possible to do something similar but with the video thumbnails themselves and not the library thumbnails.
Basically I want the video thumbnails in my library to "come alive" similar to how you have it when you mouse over the Library. I want it to start playing a preview of the video in the thumbnail before selecting the video. Similar to youtube or other video sites.
It's fine if this is just a slideshow of stills from the video too. I'm thinking since Trickplay is already a thing that compiles stills from your video can you utilize those images to play on the thumbnail at the video selection screen instead of in the video scrubber?

If i understand correctly what u wanted then, Just put the image into the each folder, in your case thumb.jpg (avif), for example u can try the demon slayer image i posted above and save is as thumb.jpg put it into your one of your movie/series folder.

The CSS:

Code:

/* ANIME */
.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;
}

Change the ID to your own library ID using inspect element in web browser.
Upload the transparent (PNG / GIF) for the label as "Primary Image" if u wish a label.
Upload the Animated image (GIF, WEBP, AVIF) as "LOGO" for the animation.
in my case i use AVIF because is smaller in size, just rename the file to jpg.

This is very cool. I'm wondering if you know whether it is possible to do something similar but with the video thumbnails themselves and not the library thumbnails.
Basically I want the video thumbnails in my library to "come alive" similar to how you have it when you mouse over the Library. I want it to start playing a preview of the video in the thumbnail before selecting the video. Similar to youtube or other video sites.
It's fine if this is just a slideshow of stills from the video too. I'm thinking since Trickplay is already a thing that compiles stills from your video can you utilize those images to play on the thumbnail at the video selection screen instead of in the video scrubber?

Layout

I'm very interested on how you generated these! I would love to apply it to all my libraries. Would you mind sharing more or how?

U can easily create those from any video files save it as .avif to reduce the size then just rename it as .jpg to be recognized by jellyfin.
in my case i use photoshop to edit the video.
more posters:

Show Content

Spoiler

I want a moving thumbnail for each video and I have several video files per folder so how could that work if I just name it "thumb.jpg"? I need a jpg for each video in the folder.

Sorry, english is not my native language. so i try my best to explain it:
First u just need to put the thumbnail (animated) into the destination directory like this


then the result after your jellyfin library scan: