feat: use Heta banner as project cover with hover zoom

Author: tulongshaonian771

_data/projects.yml

@@ -3,7 +3,7 @@
   status: "active"
   tags: ["RAG", "Knowledge Graph", "LLM"]
   cover_emoji: "🧠"
-  cover_image: ""
+  cover_image: "/assets/images/projects/heta-banner.png"
   url: "https://github.com/KnowledgeXLab/Heta"
   papers: []
 

assets/css/main.css

@@ -718,6 +718,19 @@ button.pub-link {
   background: rgba(255,255,255,0.08);
   bottom: -30px; left: -20px;
 }
+.project-cover.has-image { background: var(--bg-secondary); }
+.project-cover.has-image::before,
+.project-cover.has-image::after { display: none; }
+.project-cover-link {
+  position: absolute; inset: 0;
+  display: block; line-height: 0;
+}
+.project-cover.has-image img {
+  width: 100%; height: 100%;
+  object-fit: cover; display: block;
+  transition: transform 0.4s ease;
+}
+.project-card:hover .project-cover.has-image img { transform: scale(1.04); }
 .project-cover-emoji {
   font-size: 3rem; position: relative; z-index: 1;
   margin-bottom: 10px;

assets/images/projects/heta-banner.png

@@ -15,18 +15,25 @@ description: Ongoing and completed research projects at KnowledgeXLab.
 <div class="projects-grid" style="margin-bottom: 48px;">
   {% for project in active_projects %}
   <div class="project-card">
-    <div class="project-cover">
+    <div class="project-cover{% if project.cover_image and project.cover_image != "" %} has-image{% endif %}">
       {% if project.cover_image and project.cover_image != "" %}
-        <img src="{{ project.cover_image | relative_url }}" alt="{{ project.name }}" style="width:100%;height:100%;object-fit:cover;position:absolute;inset:0;">
-      {% endif %}
-      <div class="project-cover-emoji">{{ project.cover_emoji | default: "🔬" }}</div>
-      <div class="project-cover-title">
         {% if project.url and project.url != "" %}
-          <a href="{{ project.url }}" target="_blank" rel="noopener">{{ project.name }}</a>
+          <a href="{{ project.url }}" target="_blank" rel="noopener" class="project-cover-link">
+            <img src="{{ project.cover_image | relative_url }}" alt="{{ project.name }}">
+          </a>
         {% else %}
-          {{ project.name }}
+          <img src="{{ project.cover_image | relative_url }}" alt="{{ project.name }}">
         {% endif %}
-      </div>
+      {% else %}
+        <div class="project-cover-emoji">{{ project.cover_emoji | default: "🔬" }}</div>
+        <div class="project-cover-title">
+          {% if project.url and project.url != "" %}
+            <a href="{{ project.url }}" target="_blank" rel="noopener">{{ project.name }}</a>
+          {% else %}
+            {{ project.name }}
+          {% endif %}
+        </div>
+      {% endif %}
     </div>
     <div class="project-body">
       <p>{{ project.description }}</p>