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

Enhance video titles with more cinematic and attractive visual effects

Browse Source 
Improve video card component styling to include animated text glow, scale effects, and gradient overlays for a more cinematic presentation. Update CSS with new keyframes 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
This commit is contained in:
sebastjanartic 2025-08-29 20:13:44 +00:00
parent f20817d542
commit 9d73ffc20e
2 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -226,15 +226,23 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
</div> </div>
)} )}
{/* Title overlay at bottom */} {/* Cinematic title overlay */}
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent p-3"> <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/95 via-black/60 to-transparent p-4 transition-all duration-500 group-hover:from-black/100 group-hover:via-black/80">
<h3 <h3
className="text-white text-sm md:text-base font-semibold line-clamp-2 hover:text-bunny-blue transition-colors duration-300 cursor-pointer" className="text-white text-sm md:text-lg font-bold tracking-wide leading-tight line-clamp-2 hover:text-yellow-400 transition-all duration-500 cursor-pointer transform group-hover:scale-105 drop-shadow-2xl"
style={{
fontFamily: 'system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif',
textShadow: '2px 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5)',
letterSpacing: '0.025em'
}}
onClick={() => onClick?.(video)} onClick={() => onClick?.(video)}
data-testid={`text-title-${video.id}`} data-testid={`text-title-${video.id}`}
> >
{video.title} {video.title}
</h3> </h3>
{/* Subtle accent line */}
<div className="w-0 h-0.5 bg-gradient-to-r from-yellow-400 to-orange-500 transition-all duration-700 group-hover:w-full mt-2 opacity-0 group-hover:opacity-100"></div>
</div> </div>
</div> </div>

12
client/src/index.css
View File

@ -387,11 +387,21 @@ input[data-testid*="search"]::placeholder {
opacity: 0; opacity: 0;
} }
/* Maximum possible z-index for video card hover */ /* Maximum possible z-index for video card hover with cinematic effects */
.video-card:hover { .video-card:hover {
z-index: 2147483647 !important; z-index: 2147483647 !important;
} }
/* Cinematic text animations */
@keyframes titleGlow {
0%, 100% { text-shadow: 2px 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5); }
50% { text-shadow: 2px 2px 12px rgba(0,0,0,0.9), 0 0 25px rgba(255,215,0,0.3), 0 0 35px rgba(255,165,0,0.2); }
}
.video-card:hover h3 {
animation: titleGlow 2s ease-in-out infinite;
}
/* Hide picture-in-picture button on all video elements */ /* Hide picture-in-picture button on all video elements */
video::-webkit-media-controls-picture-in-picture-button { video::-webkit-media-controls-picture-in-picture-button {
display: none !important; display: none !important;