From b08924650b7ac935d5aa09d82bb0c380ca663fa8 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 18:14:22 +0000
Subject: [PATCH] Improve video card hover effects for a better viewing
 experience

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
---
 client/src/components/simple-carousel.tsx |  2 +-
 client/src/components/video-card.tsx      |  7 ++++---
 client/src/index.css                      | 23 +++++++++++++++++------
 client/src/pages/home.tsx                 |  2 +-
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/client/src/components/simple-carousel.tsx b/client/src/components/simple-carousel.tsx
index 9549569..a0576d4 100644
--- a/client/src/components/simple-carousel.tsx
+++ b/client/src/components/simple-carousel.tsx
@@ -96,7 +96,7 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
   }, [category.videos.length]);
 
   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">
         {category.title}
       </h2>
diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 2a54e09..eedf523 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -163,13 +163,14 @@ 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 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={{ 
         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 ? 5 : 1,
-        position: isHovered ? 'relative' : 'static'
+        zIndex: isHovered ? 999999 : 1,
+        position: 'relative',
+        transform: isHovered ? 'scale(1.35) translateZ(0)' : 'scale(1) translateZ(0)'
       }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
diff --git a/client/src/index.css b/client/src/index.css
index 6dc63b2..931ae16 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -387,12 +387,23 @@ input[data-testid*="search"]::placeholder {
   opacity: 0;
 }
 
-/* Maximum z-index hover effect */
-.individual-video-hover:hover {
-  z-index: 9999 !important;
-  position: relative !important;
-  transform: scale(1.05) !important;
-  transition: all 0.3s ease !important;
+/* 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 {
+  z-index: 999999 !important;
 }
 
 /* Hide picture-in-picture button on all video elements */
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 431973b..aab667c 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -78,7 +78,7 @@ export default function Home() {
         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 */}