Help with a CSS for Jellyfin

2013

2013

2013

Soldato
Joined
29 Dec 2012
Posts
4,338
Hi could some help me, I know basics of CSS but still leering, I trying to customise a Theme for Jellyfin.

I wanted to start with baisc and create a hover over similar to the one used on Disney+
I'm having some issues with this code - I created the hoverover effect to but for some reason, I keep getting a small gap on the bottom and right side, I have tried to make the gap even all the way around, the gaps it gets even bigger on the right and bottom i dont understand it, I'm also not sure if im missing anything else in the code .

CSS: 
/* --- 4. Card & Hover Styles --- */

.card {

border-radius: var(--rounding-cards); /* Uses the specific rounding variable for cards */

overflow: hidden;

transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border 0.2s ease-in-out;

position: relative;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle default shadow for cards */

}



/* Target the image container for the border and rounded corners */

.cardImageContainer {

border-radius: var(--rounding-cards);

border: 3px solid transparent; /* Start with transparent border */

transition: border 0.2s ease-in-out;

overflow: hidden; /* Ensures image inside is also rounded */

}



/* Apply hover effects to the whole card */

.card:hover, .card:focus {

transform: scale(1.05); /* Adjust scale as desired */

z-index: 10; /* Ensures the hovered card is on top */

box-shadow: 0 0 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.6); /* More prominent accent glow */

}



/* Apply border to the image container on hover/focus */

.card:hover .cardImageContainer, .card:focus .cardImageContainer {

border-color: var(--accent-color) !important; /* Change border to accent color on hover/focus */

}



/* Info pop-up overlay (CSS only simulation) */

/* As discussed, actual content needs JS, but this styles the visual pop-up */

.cardOverlay {

position: absolute;

bottom: 0;

left: 0;

right: 0;

background: linear-gradient(to top, rgba(var(--base-dark-rgb), 0.9), rgba(var(--base-dark-rgb), 0));

padding: 10px;

opacity: 0;

transform: translateY(100%);

transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;

border-bottom-left-radius: var(--rounding-cards);

border-bottom-right-radius: var(--rounding-cards);

color: var(--text-color);

font-size: 0.9em;

pointer-events: none; /* Allows clicks to pass through if not actively interacted with */

}



.card:hover .cardOverlay, .card:focus .cardOverlay {

opacity: 1;

transform: translateY(0);

}
 
Last edited:
People are still asking forums for coding advice in 2025? Here’s what Claude has to say….

# Jellyfin Theme CSS - Disney+ Hover Effect (BBCode Format)

Looking at your CSS, the gap issue you’re experiencing is likely caused by the **border on `.cardImageContainer`** combined with the **scaling transform**. Here’s what’s happening and how to fix it:

## The Problem

When you apply `transform: scale(1.05)` to the entire `.card`, it scales everything including the 3px border. However, the border creates additional space that becomes more noticeable when scaled up, especially on the right and bottom where the scaling effect is more pronounced.

## Solution Options

### Option 1: Move the border to the card itself (Recommended)

```
Code: 
.card {
    border-radius: var(--rounding-cards);
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border 0.2s ease-in-out;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 3px solid transparent; /* Move border here */
}

.cardImageContainer {
    border-radius: var(--rounding-cards);
    /* Remove border from here */
    transition: border 0.2s ease-in-out;
    overflow: hidden;
}

.card:hover, .card:focus {
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 0 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.6);
    border-color: var(--accent-color) !important; /* Apply border to card instead */
}

/* Remove the separate border rule for cardImageContainer */
/* .card:hover .cardImageContainer, .card:focus .cardImageContainer {
    border-color: var(--accent-color) !important;
} */
```

### Option 2: Use box-shadow instead of border

```
Code: 
.card {
    border-radius: var(--rounding-cards);
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.cardImageContainer {
    border-radius: var(--rounding-cards);
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out;
}

.card:hover, .card:focus {
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 0 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.6);
}

.card:hover .cardImageContainer, .card:focus .cardImageContainer {
    box-shadow: inset 0 0 0 3px var(--accent-color); /* Creates border effect without affecting layout */
}
```

### Option 3: Adjust scaling origin

If you want to keep the current structure, try adjusting the transform origin:

```
Code: 
.card:hover, .card:focus {
    transform: scale(1.05);
    transform-origin: center center; /* Ensures even scaling */
    z-index: 10;
    box-shadow: 0 0 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.6);
}
```

## Additional Disney+ Style Enhancements

To make it even more Disney+-like, consider these additions:

```
Code: 
.card {
    /* Add a subtle initial transform to make the hover more dramatic */
    transform: scale(1);
    cursor: pointer;
}

.card:hover, .card:focus {
    transform: scale(1.05);
    /* Add a subtle upward movement like Disney+ */
    transform: scale(1.05) translateY(-2px);
    z-index: 10;
    box-shadow: 0 8px 25px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.4);
}

/* Make the transition slightly snappier */
.card {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border 0.15s ease-out;
}
```

The first solution should eliminate your gap issue while maintaining the visual effect you’re looking for. The border being on the outer container (`.card`) means it won’t create spacing issues when the element is scaled.
 
This helps a lot, thanks! I wasn't sure I'd get a reply, so I'm really glad you did. I've been struggling with this for ages, trying different options without any luck. I'm going to try your solution now
 
Just tested but they all has the issues, i've already had. Also ive just took another look at the code I pasted pasted part of it so i've uploaded it again
### Option 1. added the boarder but its broken


The others only offer a basic Hover over without the boarder, that ive managed to do but im just struggling with this boarder.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom