video thumnail added

Author: rohitdavas

components/timeline.html

@@ -12,7 +12,10 @@ <h3>AI Software Developer - Captury GmbH</h3>
             <a href="https://youtu.be/p_7iE6UsSLM?si=i9vZnVBG1XIG_IQ0" target="_blank" class="video-thumbnail">
                 <img src="https://img.youtube.com/vi/p_7iE6UsSLM/maxresdefault.jpg" alt="Project Video">
                 <div class="play-overlay">
-                    <i class="fas fa-play"></i>
+                    <div class="overlay-content">
+                        <i class="fas fa-play"></i>
+                        <p class="video-description">My released work of hand tracking.</p>
+                    </div>
                 </div>
             </a>
             <div class="timeline-item">

styles.css

@@ -516,36 +516,53 @@ body {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: rgba(0, 0, 0, 0.6);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s ease;
 }
 
+.overlay-content {
+    text-align: center;
+    transform: translateY(20px);
+    transition: transform 0.3s ease;
+}
+
 .play-overlay i {
     color: white;
     font-size: 2rem;
-    transform: scale(0.8);
-    transition: transform 0.3s ease;
+    margin-bottom: 1rem;
+    display: block;
 }
 
-.video-thumbnail:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 12px var(--shadow-color);
+.video-description {
+    color: white;
+    font-size: 1rem;
+    margin: 0;
+    padding: 0 1rem;
+    font-weight: 500;
+    opacity: 0;
+    transform: translateY(10px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
-.video-thumbnail:hover img {
-    transform: scale(1.03);
+.video-thumbnail:hover .play-overlay {
+    opacity: 1;
 }
 
-.video-thumbnail:hover .play-overlay {
+.video-thumbnail:hover .overlay-content {
+    transform: translateY(0);
+}
+
+.video-thumbnail:hover .video-description {
     opacity: 1;
+    transform: translateY(0);
 }
 
-.video-thumbnail:hover .play-overlay i {
-    transform: scale(1);
+.video-thumbnail:hover img {
+    transform: scale(1.03);
 }
 
 /* Timeline Responsive */