diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index bf98da8..52d3429 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -171,8 +171,14 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
         zIndex: isHovered ? 999999 : 1,
         position: 'relative'
       }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      onMouseEnter={() => {
+        setIsHovered(true);
+        document.body.classList.add('video-card-hovered');
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+        document.body.classList.remove('video-card-hovered');
+      }}
     >
       {/* Video preview container */}
       <div 
diff --git a/client/src/index.css b/client/src/index.css
index fe7b3af..d07dd47 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -387,27 +387,21 @@ input[data-testid*="search"]::placeholder {
   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 {
   z-index: 2147483647 !important;
+  transform: scale(1.35) !important;
 }
 
-/* Force specific containers to be overflow visible when video is hovered */
-.carousel-track:has(.video-card:hover) {
+/* When video is being hovered (managed by JavaScript), make all containers overflow visible */
+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;
 }
 
-.netflix-grid-container:has(.video-card:hover) {
-  overflow: visible !important;
-}
-
-/* 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) {
+/* Keep scroll functionality intact for horizontal scroll containers */
+body.video-card-hovered div[class*="overflow-x-auto"] {
   overflow-x: auto !important;
   overflow-y: visible !important;
 }