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 .
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: