Fix duplicate title overlay on project cards

Author: huaicheng

layouts/project/list.html

@@ -10,9 +10,8 @@ <h1>Research Projects</h1>
     <article class="project-card">
       {{ $featured := .Resources.GetMatch "featured.*" }}
       {{ if $featured }}
-      <div class="project-image" data-title="{{ .Title }}">
+      <div class="project-image">
         <img src="{{ $featured.RelPermalink }}" alt="{{ .Title }}" loading="lazy">
-        <div class="project-title-overlay">{{ .Title }}</div>
       </div>
       {{ end }}
 
@@ -89,40 +88,18 @@ <h1>Research Projects</h1>
   position: relative;
   height: 160px;
   overflow: hidden;
-  background: linear-gradient(135deg, rgba(134, 31, 65, 0.95), rgba(229, 117, 31, 0.95));
 }
 
 .project-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 0.3s ease, opacity 0.3s ease;
-  opacity: 0.85;
+  transition: transform 0.3s ease, filter 0.3s ease;
 }
 
 .project-card:hover .project-image img {
-  transform: scale(1.08);
-  opacity: 0.95;
-}
-
-.project-title-overlay {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 1rem;
-  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.3));
-  color: white;
-  font-size: 1.1rem;
-  font-weight: 700;
-  text-align: center;
-  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
-  transition: all 0.3s ease;
-}
-
-.project-card:hover .project-title-overlay {
-  padding-bottom: 1.2rem;
-  background: linear-gradient(to top, rgba(134, 31, 65, 0.95), rgba(134, 31, 65, 0.3));
+  transform: scale(1.05);
+  filter: brightness(1.1);
 }
 
 .project-content {
@@ -213,11 +190,6 @@ <h1>Research Projects</h1>
   .project-image {
     height: 140px;
   }
-  
-  .project-title-overlay {
-    font-size: 1rem;
-    padding: 0.8rem;
-  }
 }
 
 @media (max-width: 480px) {