From 8566ac4d3699c97bb35c5a0b7f183224bdf7d782 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 20:11:08 +0000
Subject: [PATCH] Add video titles to display on the cards

Add title overlay to the VideoCard component in client/src/components/video-card.tsx, allowing video titles to be displayed at the bottom of each card with gradient background and hover effects.

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/video-card.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 91b380f..6d09188 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -230,6 +230,17 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
         <div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded z-10">
           {formatDuration(video.duration)}
         </div>
+
+        {/* Title overlay at bottom */}
+        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent p-3">
+          <h3 
+            className="text-white text-sm md:text-base font-semibold line-clamp-2 hover:text-bunny-blue transition-colors duration-300 cursor-pointer"
+            onClick={() => onClick?.(video)}
+            data-testid={`text-title-${video.id}`}
+          >
+            {video.title}
+          </h3>
+        </div>
         
       </div>