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

Improve video card hover effects for a better viewing experience

Browse Source 
Update CSS and component logic to enhance the visual feedback when hovering over video cards, ensuring they layer correctly and scale smoothly.

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:14:22 +00:00
parent df5be7285c
commit b08924650b
4 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/simple-carousel.tsx
View File

@ -96,7 +96,7 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
}, [category.videos.length]); }, [category.videos.length]);
return ( return (
<div className="relative group mb-8" style={{ overflow: 'visible' }}> <div className="relative group mb-8 carousel-track" style={{ overflow: 'visible' }}>
<h2 className="text-2xl font-bold text-bunny-light mb-6 px-4"> <h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
{category.title} {category.title}
</h2> </h2>

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

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

23
client/src/index.css
View File

@ -387,12 +387,23 @@ input[data-testid*="search"]::placeholder {
opacity: 0; opacity: 0;
} }
/* Maximum z-index hover effect */ /* Create stacking context for main container */
.individual-video-hover:hover { .netflix-grid-container {
z-index: 9999 !important; overflow: visible !important;
position: relative !important; position: relative;
transform: scale(1.05) !important; z-index: 1;
transition: all 0.3s ease !important; }
/* 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 {
z-index: 999999 !important;
} }
/* Hide picture-in-picture button on all video elements */ /* Hide picture-in-picture button on all video elements */

2
client/src/pages/home.tsx
View File

@ -78,7 +78,7 @@ export default function Home() {
currentView={viewMode} currentView={viewMode}
/> />
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative overflow-visible"> <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative overflow-visible netflix-grid-container">
{/* Trikotniki na robovih - ne prekrivajo video kartic */} {/* Trikotniki na robovih - ne prekrivajo video kartic */}