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

Enhance video card hover effect with increased scale and overflow visibility

Browse Source 
Update `VideoCard` component to add a hover effect that scales the card and manages body class for CSS-based overflow visibility. Modify CSS to apply scale and ensure overflow visibility on parent elements when the `video-card-hovered` class is present on the body.

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:19:37 +00:00
parent f7b9d034ca
commit fa28e5fecb
2 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -171,8 +171,14 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
zIndex: isHovered ? 999999 : 1, zIndex: isHovered ? 999999 : 1,
position: 'relative' position: 'relative'
}} }}
onMouseEnter={() => setIsHovered(true)} onMouseEnter={() => {
onMouseLeave={() => setIsHovered(false)} setIsHovered(true);
document.body.classList.add('video-card-hovered');
}}
onMouseLeave={() => {
setIsHovered(false);
document.body.classList.remove('video-card-hovered');
}}
> >
{/* Video preview container */} {/* Video preview container */}
<div <div

22
client/src/index.css
View File

@ -387,27 +387,21 @@ input[data-testid*="search"]::placeholder {
opacity: 0; opacity: 0;
} }
/* Force all parent elements to be overflow visible when video card is hovered */ /* Video card hover effect with maximum z-index */
.video-card:hover { .video-card:hover {
z-index: 2147483647 !important; z-index: 2147483647 !important;
transform: scale(1.35) !important;
} }
/* Force specific containers to be overflow visible when video is hovered */ /* When video is being hovered (managed by JavaScript), make all containers overflow visible */
.carousel-track:has(.video-card:hover) { body.video-card-hovered .carousel-track,
body.video-card-hovered .netflix-grid-container,
body.video-card-hovered div:not([class*="overflow-x-auto"]):not([class*="overflow-y-auto"]) {
overflow: visible !important; overflow: visible !important;
} }
.netflix-grid-container:has(.video-card:hover) { /* Keep scroll functionality intact for horizontal scroll containers */
overflow: visible !important; body.video-card-hovered div[class*="overflow-x-auto"] {
}
/* Force parent divs to be overflow visible, but exclude scroll containers */
div:has(.video-card:hover) {
overflow: visible !important;
}
/* Restore scroll behavior only for horizontal scroll containers */
div[class*="overflow-x-auto"]:has(.video-card:hover) {
overflow-x: auto !important; overflow-x: auto !important;
overflow-y: visible !important; overflow-y: visible !important;
} }