From af0e11171c0a8d0ec66a8188e77a575b18fc746c Mon Sep 17 00:00:00 2001
From: Friday <friday@openclaw.local>
Date: Sun, 26 Jul 2026 14:05:21 +0000
Subject: [PATCH] feat: improve feature image presentation

---
 assets/css/compiled/main.css                    | 10 ++++++++++
 exampleSite/config/_default/params.toml         |  1 +
 exampleSite/content/docs/configuration/index.md |  1 +
 layouts/partials/article-link/_shortcode.html   | 11 ++++++++---
 layouts/partials/article-link/card-related.html | 10 +++++++---
 layouts/partials/article-link/card.html         | 11 ++++++++---
 layouts/partials/article-link/simple.html       | 11 ++++++++---
 layouts/partials/term-link/card.html            |  8 ++++++--
 8 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index ce9047b1..dff4f602 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -2725,6 +2725,10 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .duration-500 {
+    --tw-duration: 500ms;
+    transition-duration: 500ms;
+  }
   .duration-\[350ms\] {
     --tw-duration: 350ms;
     transition-duration: 350ms;
@@ -2777,6 +2781,12 @@
     .group-hover\:visible:is(:where(.group):hover *) {
       visibility: visible;
     }
+    .group-hover\:scale-105:is(:where(.group):hover *) {
+      --tw-scale-x: 105%;
+      --tw-scale-y: 105%;
+      --tw-scale-z: 105%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
     .group-hover\:scale-110:is(:where(.group):hover *) {
       --tw-scale-x: 110%;
       --tw-scale-y: 110%;
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index 4701907b..37ee952b 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -109,6 +109,7 @@ fingerprintAlgorithm = "sha512" # Valid values are "sha512" (default), "sha384",
   cardView = true
   cardViewScreenWidth = false
   constrainItemsWidth = false
+  featureImageHover = true
 
 [sitemap]
   excludedKinds = []
diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md
index 37e0ca29..0a32b174 100644
--- a/exampleSite/content/docs/configuration/index.md
+++ b/exampleSite/content/docs/configuration/index.md
@@ -227,6 +227,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | Name | Default | Description |
 | --- | --- | --- |
 | `header.layout` | `"basic"` | Defines the header for the entire site, supported values are `basic`, `fixed`, `fixed-fill`, `fixed-fill-blur`, `fixed-gradient`, and `floating`. |
+| `list.featureImageHover` | `false` | Adds a subtle zoom transition when a visitor hovers a post or related-content card. Individual pages can override this with `featureImageHover` in front matter. |
 
 ### Footer
 
diff --git a/layouts/partials/article-link/_shortcode.html b/layouts/partials/article-link/_shortcode.html
index 399c4709..41a4e9cc 100644
--- a/layouts/partials/article-link/_shortcode.html
+++ b/layouts/partials/article-link/_shortcode.html
@@ -34,6 +34,9 @@
 {{ $page := $target }}
 {{ $featured := "" }}
 {{ $featuredURL := "" }}
+{{ $featureImageHover := site.Params.list.featureImageHover | default false }}
+{{ if isset $target.Params "featureImageHover" }}{{ $featureImageHover = $target.Params.featureImageHover }}{{ end }}
+{{ $featureImagePosition := $target.Params.imagePositionFeature | default site.Params.imagePositionFeature | default site.Params.imagePosition }}
 {{ if not $target.Params.hideFeatureImage }}
   {{/* frontmatter */}}
   {{ with $page }}
@@ -86,15 +89,17 @@
 {{ end }}
 
 
-<article class="article-link--shortcode {{ $cardClasses }}">
+<article class="article-link--shortcode group {{ $cardClasses }}">
   {{ with $featuredURL }}
     <div class="flex-none relative overflow-hidden {{ $imgWrapperClasses }} thumbnail">
       <img
         src="{{ . }}"
-        role="presentation"
+        alt="{{ $target.Title }}"
         loading="lazy"
         decoding="async"
-        class="not-prose absolute inset-0 w-full h-full object-cover" />
+        fetchpriority="low"
+        class="not-prose absolute inset-0 h-full w-full object-cover transition duration-500 {{ if $featureImageHover }}group-hover:scale-105{{ end }}"
+        {{ with $featureImagePosition }}style="object-position: {{ . }};"{{ end }} />
     </div>
   {{ end }}
   <div class="{{ $cardContentClasses }}">
diff --git a/layouts/partials/article-link/card-related.html b/layouts/partials/article-link/card-related.html
index e60ee1ea..d9cdad7e 100644
--- a/layouts/partials/article-link/card-related.html
+++ b/layouts/partials/article-link/card-related.html
@@ -9,6 +9,9 @@
 {{ $thumbnailAspectRatio := site.Params.thumbnailAspectRatio | default "1.5" }}
 {{ $thumbnailAspectRatio = replaceRE "[^0-9.]" "" $thumbnailAspectRatio }}
 {{ if eq $thumbnailAspectRatio "" }}{{ $thumbnailAspectRatio = "1.5" }}{{ end }}
+{{ $featureImageHover := site.Params.list.featureImageHover | default false }}
+{{ if isset .Params "featureImageHover" }}{{ $featureImageHover = .Params.featureImageHover }}{{ end }}
+{{ $featureImagePosition := .Params.imagePositionFeature | default site.Params.imagePositionFeature | default site.Params.imagePosition }}
 {{/* frontmatter */}}
 {{ with $page }}
   {{ $p := . }}
@@ -60,18 +63,19 @@
 
 
 <article
-  class="article-link--related relative min-h-full min-w-full overflow-hidden rounded-lg border border-neutral-300 dark:border-neutral-600">
+  class="article-link--related group relative min-h-full min-w-full overflow-hidden rounded-lg border border-neutral-300 dark:border-neutral-600">
   {{ with $featuredURL }}
     <div
       class="flex-none relative overflow-hidden thumbnail_card_related"
       style="--thumbnail-aspect-ratio: {{ $thumbnailAspectRatio }}">
       <img
         src="{{ . }}"
-        role="presentation"
+        alt="{{ $page.Title }}"
         loading="lazy"
         decoding="async"
         fetchpriority="low"
-        class="not-prose absolute inset-0 w-full h-full object-cover" />
+        class="not-prose absolute inset-0 h-full w-full object-cover transition duration-500 {{ if $featureImageHover }}group-hover:scale-105{{ end }}"
+        {{ with $featureImagePosition }}style="object-position: {{ . }};"{{ end }} />
     </div>
   {{ end }}
   {{ if and .Draft .Site.Params.article.showDraftLabel }}
diff --git a/layouts/partials/article-link/card.html b/layouts/partials/article-link/card.html
index 7ace3271..5f0db5ba 100644
--- a/layouts/partials/article-link/card.html
+++ b/layouts/partials/article-link/card.html
@@ -11,6 +11,9 @@
 {{ $thumbnailAspectRatio := site.Params.thumbnailAspectRatio | default "1.5" }}
 {{ $thumbnailAspectRatio = replaceRE "[^0-9.]" "" $thumbnailAspectRatio }}
 {{ if eq $thumbnailAspectRatio "" }}{{ $thumbnailAspectRatio = "1.5" }}{{ end }}
+{{ $featureImageHover := site.Params.list.featureImageHover | default false }}
+{{ if isset .Params "featureImageHover" }}{{ $featureImageHover = .Params.featureImageHover }}{{ end }}
+{{ $featureImagePosition := .Params.imagePositionFeature | default site.Params.imagePositionFeature | default site.Params.imagePosition }}
 {{ if not .Params.hideFeatureImage }}
   {{/* frontmatter */}}
   {{ with $page }}
@@ -64,17 +67,19 @@
 
 
 <article
-  class="article-link--card relative min-h-full min-w-full overflow-hidden rounded-lg border border-neutral-300 dark:border-neutral-600">
+  class="article-link--card group relative min-h-full min-w-full overflow-hidden rounded-lg border border-neutral-300 dark:border-neutral-600">
   {{ with $featuredURL }}
     <div
       class="flex-none relative overflow-hidden thumbnail_card"
       style="--thumbnail-aspect-ratio: {{ $thumbnailAspectRatio }}">
       <img
         src="{{ . }}"
-        role="presentation"
+        alt="{{ $page.Title }}"
         loading="lazy"
         decoding="async"
-        class="not-prose absolute inset-0 w-full h-full object-cover" />
+        fetchpriority="low"
+        class="not-prose absolute inset-0 h-full w-full object-cover transition duration-500 {{ if $featureImageHover }}group-hover:scale-105{{ end }}"
+        {{ with $featureImagePosition }}style="object-position: {{ . }};"{{ end }} />
     </div>
   {{ end }}
   {{ if and .Draft .Site.Params.article.showDraftLabel }}
diff --git a/layouts/partials/article-link/simple.html b/layouts/partials/article-link/simple.html
index 58d8ea2f..44ae022a 100644
--- a/layouts/partials/article-link/simple.html
+++ b/layouts/partials/article-link/simple.html
@@ -27,6 +27,9 @@
 {{ $page := .Page }}
 {{ $featured := "" }}
 {{ $featuredURL := "" }}
+{{ $featureImageHover := site.Params.list.featureImageHover | default false }}
+{{ if isset .Params "featureImageHover" }}{{ $featureImageHover = .Params.featureImageHover }}{{ end }}
+{{ $featureImagePosition := .Params.imagePositionFeature | default site.Params.imagePositionFeature | default site.Params.imagePosition }}
 {{ if not .Params.hideFeatureImage }}
   {{/* frontmatter */}}
   {{ with $page }}
@@ -79,15 +82,17 @@
 {{ end }}
 
 
-<article class="article-link--simple {{ $cardClasses }}">
+<article class="article-link--simple group {{ $cardClasses }}">
   {{ with $featuredURL }}
     <div class="flex-none relative overflow-hidden {{ $imgWrapperClasses }} thumbnail">
       <img
         src="{{ . }}"
-        role="presentation"
+        alt="{{ $page.Title }}"
         loading="lazy"
         decoding="async"
-        class="not-prose absolute inset-0 w-full h-full object-cover" />
+        fetchpriority="low"
+        class="not-prose absolute inset-0 h-full w-full object-cover transition duration-500 {{ if $featureImageHover }}group-hover:scale-105{{ end }}"
+        {{ with $featureImagePosition }}style="object-position: {{ . }};"{{ end }} />
     </div>
   {{ end }}
   <div class="{{ $cardContentClasses }}">
diff --git a/layouts/partials/term-link/card.html b/layouts/partials/term-link/card.html
index ae196a2f..02341289 100644
--- a/layouts/partials/term-link/card.html
+++ b/layouts/partials/term-link/card.html
@@ -5,6 +5,9 @@
 {{ $thumbnailAspectRatio := site.Params.thumbnailAspectRatio | default "1.5" }}
 {{ $thumbnailAspectRatio = replaceRE "[^0-9.]" "" $thumbnailAspectRatio }}
 {{ if eq $thumbnailAspectRatio "" }}{{ $thumbnailAspectRatio = "1.5" }}{{ end }}
+{{ $featureImageHover := site.Params.list.featureImageHover | default false }}
+{{ if isset .Page.Params "featureImageHover" }}{{ $featureImageHover = .Page.Params.featureImageHover }}{{ end }}
+{{ $featureImagePosition := .Page.Params.imagePositionFeature | default site.Params.imagePositionFeature | default site.Params.imagePosition }}
 {{ $p := .Page }}
 {{ with .Page.Params.featureimage }}
   {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
@@ -35,7 +38,7 @@
 
 
 <div class="min-w-full">
-  <div class="border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
+  <div class="group relative overflow-hidden rounded border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
     {{ with $featuredURL }}
       <figure
         class="not-prose flex-none relative overflow-hidden thumbnail_card"
@@ -46,7 +49,8 @@
           loading="lazy"
           decoding="async"
           fetchpriority="low"
-          class="not-prose absolute inset-0 w-full h-full object-cover" />
+          class="not-prose absolute inset-0 h-full w-full object-cover transition duration-500 {{ if $featureImageHover }}group-hover:scale-105{{ end }}"
+          {{ with $featureImagePosition }}style="object-position: {{ . }};"{{ end }} />
       </figure>
     {{ end }}
     {{ if site.Params.taxonomy.showTermCount | default true }}