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

Improve video display when hovering over them in carousels

Browse Source 
Adjusted CSS to ensure videos correctly display above other elements when hovered, fixing z-index and overflow issues in carousel components.

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:02:42 +00:00
parent 5c0fef6df7
commit 05a71521d9
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/index.css
View File

@ -387,12 +387,27 @@ input[data-testid*="search"]::placeholder {
opacity: 0;
}
/* Force hover video above everything - but not buttons */
.individual-video-hover:hover:not(button):not([role="button"]) {
/* Force hover video above everything - escape parent overflow */
.individual-video-hover:hover {
z-index: 9999 !important;
position: relative !important;
transform: scale(1.05) !important;
transform: scale(1.05) translateZ(0) !important;
transition: all 0.3s ease !important;
pointer-events: auto !important;
will-change: transform !important;
}
/* Force all carousel containers to allow z-index stacking */
.individual-video-hover:hover,
.individual-video-hover:hover * {
position: relative !important;
z-index: inherit !important;
}
/* Ensure parent carousel doesn't clip hovering videos */
div:has(.individual-video-hover:hover) {
overflow: visible !important;
position: relative !important;
}
/* Hide picture-in-picture button on all video elements */