sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve video card display when hovering over them

Browse Source 
Update CSS and React component to enhance the visual feedback when a user hovers over a video card, ensuring it scales up and appears above other elements correctly.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/kdQ95gE
This commit is contained in:
sebastjanartic 2025-08-29 18:15:46 +00:00
parent b08924650b
commit 29d9ad3eec
2 changed files with 11 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/components/video-card.tsx
View File

@ -163,14 +163,13 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
return (
<div
data-testid={`card-video-${video.id}`}
className={`video-card transition-all duration-500 ease-out p-1 md:p-2 ${className}`}
className={`video-card transition-all duration-500 ease-out hover:scale-[1.35] p-1 md:p-2 ${className}`}
style={{
transformStyle: 'preserve-3d',
transition: 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), z-index 0.1s ease',
willChange: 'transform',
zIndex: isHovered ? 999999 : 1,
position: 'relative',
transform: isHovered ? 'scale(1.35) translateZ(0)' : 'scale(1) translateZ(0)'
position: 'relative'
}}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}

25
client/src/index.css
View File

@ -387,25 +387,18 @@ input[data-testid*="search"]::placeholder {
opacity: 0;
}
/* Create stacking context for main container */
.netflix-grid-container {
overflow: visible !important;
position: relative;
z-index: 1;
}
/* Create stacking context for each carousel */
.carousel-track {
overflow: visible !important;
position: relative;
z-index: 2;
}
/* Ensure video cards can pop above everything */
.video-card:hover {
/* Force all parent elements to be overflow visible when video card is hovered */
.video-card:hover,
.video-card:hover * {
z-index: 999999 !important;
}
/* Force all ancestors to show overflow when video is hovered */
body:has(.video-card:hover) *,
html:has(.video-card:hover) * {
overflow: visible !important;
}
/* Hide picture-in-picture button on all video elements */
video::-webkit-media-controls-picture-in-picture-button {
display: none !important;