diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index d9788bf9..033ce358 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -2415,6 +2415,13 @@ body.zen-mode-enable {
       }
     }
   }
+  .group-hover\:underline-offset-2 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        text-underline-offset: 2px;
+      }
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3721,44 +3728,29 @@ a {
 pre {
   text-align: left;
 }
+.thumbnail, .thumbnail_card, .thumbnail_card_related, .thumbnail_card_term, .single_hero_basic, .single_hero_background {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
 .thumbnail {
   min-width: 300px;
   height: 180px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 .thumbnail_card {
   height: 200px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 .thumbnail_card_related {
   height: 150px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 .thumbnail_card_term {
   height: 150px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-.single_hero_basic {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 .single_hero_round {
   max-height: 50vh;
   object-fit: cover;
 }
 .single_hero_background {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
   z-index: -10;
 }
 .hero_gradient {
@@ -3821,6 +3813,9 @@ pre {
   text-decoration-thickness: 3px;
   text-underline-offset: 4px;
 }
+.group-hover-card:hover:has(.group-hover-cancel:hover) .group-hover-card-title {
+  text-decoration: none !important;
+}
 @layer base {
   [type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
     appearance: none;
diff --git a/assets/css/main.css b/assets/css/main.css
index c1e6e7de..a617b674 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -277,3 +277,8 @@ pre {
   text-decoration-thickness: 3px;
   text-underline-offset: 4px;
 }
+
+/* Cancel group hover if .group-hover-card contains .group-hover-cancel*/
+.group-hover-card:hover:has(.group-hover-cancel:hover) .group-hover-card-title {
+  text-decoration: none !important;
+}
diff --git a/layouts/partials/article-link/_shortcode.html b/layouts/partials/article-link/_shortcode.html
index 41d96c0e..46ab8ec2 100644
--- a/layouts/partials/article-link/_shortcode.html
+++ b/layouts/partials/article-link/_shortcode.html
@@ -4,7 +4,7 @@
 {{ $constrainItemsWidth := site.Params.list.constrainItemsWidth | default false }}
 {{ $disableImageOptimization := site.Params.disableImageOptimization | default false }}
 
-{{ $articleClasses := "flex flex-wrap md:flex-nowrap article" }}
+{{ $articleClasses := "group-hover-card group flex flex-wrap md:flex-nowrap article relative" }}
 {{ if site.Params.list.showCards }}
   {{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }}
 {{ else }}
@@ -30,7 +30,12 @@
 {{ end }}
 
 
-<a class="{{ $articleClasses }}" {{ partial "article-link/_external-link.html" $target | safeHTMLAttr }}>
+<div class="{{ $articleClasses }}">
+  <a
+    {{ partial "article-link/_external-link.html" $target | safeHTMLAttr }}
+    class="absolute inset-0"
+    aria-label="{{ $.Title }}"></a>
+
   {{- with $target.Params.images -}}
     {{- range first 6 . }}
       <meta property="og:image" content="{{ . | absURL }}">
@@ -70,7 +75,7 @@
       {{ with $target.Params.externalUrl }}
         <div>
           <div
-            class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
+            class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">
             {{ $target.Title | emojify }}
             <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
               <span class="rtl:hidden">&#8599;</span>
@@ -80,7 +85,7 @@
         </div>
       {{ else }}
         <div
-          class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2"
+          class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2"
           href="{{ $target.RelPermalink }}">
           {{ $target.Title | emojify }}
         </div>
@@ -94,7 +99,7 @@
         {{ partial "extend-article-link.html" $target }}
       {{ end }}
     </div>
-    <div class="text-sm text-neutral-500 dark:text-neutral-400">
+    <div class="group-hover-cancel text-sm text-neutral-500 dark:text-neutral-400">
       {{ partial "article-meta/basic.html" $target }}
     </div>
     {{ $showSummary := false }}
@@ -111,10 +116,10 @@
         {{ $compactSummary = $target.Params.compactSummary | default (site.Params.list.compactSummary | default false) }}
       {{ end }}
       <div class="overflow-hidden pt-1">
-        <div class="{{ if $compactSummary }}line-clamp-3{{ end }} max-w-fit prose dark:prose-invert">
+        <div class="{{ if $compactSummary }}line-clamp-3{{ end }} prose dark:prose-invert max-w-fit">
           {{ $target.Summary | plainify }}
         </div>
       </div>
     {{ end }}
   </div>
-</a>
+</div>
diff --git a/layouts/partials/article-link/card-related.html b/layouts/partials/article-link/card-related.html
index c7c49b01..1bb08b23 100644
--- a/layouts/partials/article-link/card-related.html
+++ b/layouts/partials/article-link/card-related.html
@@ -1,6 +1,6 @@
 {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
 <div
-  class="relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
+  class="group-hover-card group relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
   <a
     {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
     class="absolute inset-0"
@@ -48,7 +48,7 @@
   <div class="px-6 py-4">
     {{ with .Params.externalUrl }}
       <div
-        class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
+        class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">
         {{ $.Title | emojify }}
         <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
           <span class="rtl:hidden">&#8599;</span>
@@ -57,11 +57,13 @@
       </div>
     {{ else }}
       <div
-        class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
+        class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">
         {{ .Title | emojify }}
       </div>
     {{ end }}
-    <div class="text-sm text-neutral-500 dark:text-neutral-400">{{ partial "article-meta/basic.html" . }}</div>
+    <div class="group-hover-cancel text-sm text-neutral-500 dark:text-neutral-400">
+      {{ partial "article-meta/basic.html" . }}
+    </div>
     {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
       <div class="prose dark:prose-invert py-1">{{ .Summary | plainify }}</div>
     {{ end }}
diff --git a/layouts/partials/article-link/card.html b/layouts/partials/article-link/card.html
index 91bacda6..1112516f 100644
--- a/layouts/partials/article-link/card.html
+++ b/layouts/partials/article-link/card.html
@@ -1,6 +1,6 @@
 {{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }}
 <div
-  class="relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
+  class="group-hover-card group relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
   <a
     {{ partial "article-link/_external-link.html" . | safeHTMLAttr }}
     class="absolute inset-0"
@@ -45,7 +45,7 @@
   <div class="px-6 py-4">
     {{ with .Params.externalUrl }}
       <div
-        class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
+        class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">
         {{ $.Title | emojify }}
         <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
           <span class="rtl:hidden">&#8599;</span>
@@ -54,11 +54,13 @@
       </div>
     {{ else }}
       <div
-        class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
+        class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">
         {{ .Title | emojify }}
       </div>
     {{ end }}
-    <div class="text-sm text-neutral-500 dark:text-neutral-400">{{ partial "article-meta/basic.html" . }}</div>
+    <div class="group-hover-cancel text-sm text-neutral-500 dark:text-neutral-400">
+      {{ partial "article-meta/basic.html" . }}
+    </div>
     {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
       <div class="prose dark:prose-invert py-1">{{ .Summary | plainify }}</div>
     {{ end }}
diff --git a/layouts/partials/article-link/simple.html b/layouts/partials/article-link/simple.html
index 43b49835..44b5ac2e 100644
--- a/layouts/partials/article-link/simple.html
+++ b/layouts/partials/article-link/simple.html
@@ -1,6 +1,6 @@
 {{ $constrainItemsWidth := .Page.Site.Params.list.constrainItemsWidth | default false }}
 
-{{ $articleClasses := "flex flex-wrap md:flex-nowrap article relative" }}
+{{ $articleClasses := "group-hover-card group flex flex-wrap md:flex-nowrap article relative" }}
 {{ if .Site.Params.list.showCards }}
   {{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }}
 {{ else }}
@@ -71,7 +71,7 @@
     <div class="items-center text-left text-xl font-semibold">
       {{ with .Params.externalUrl }}
         <div
-          class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
+          class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">
           {{ $.Title | emojify }}
           <span class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500">
             <span class="rtl:hidden">&#8599;</span>
@@ -80,7 +80,7 @@
         </div>
       {{ else }}
         <div
-          class="decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 hover:underline hover:underline-offset-2">
+          class="group-hover-card-title decoration-primary-500 dark:text-neutral text-xl font-bold text-neutral-800 group-hover:underline group-hover:underline-offset-2">
           {{ .Title | emojify }}
         </div>
       {{ end }}
@@ -91,7 +91,9 @@
         {{ partial "extend-article-link.html" . }}
       {{ end }}
     </div>
-    <div class="text-sm text-neutral-500 dark:text-neutral-400">{{ partial "article-meta/basic.html" . }}</div>
+    <div class="group-hover-cancel text-sm text-neutral-500 dark:text-neutral-400">
+      {{ partial "article-meta/basic.html" . }}
+    </div>
     {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
       <div class="prose dark:prose-invert max-w-fit py-1">{{ .Summary | plainify }}</div>
     {{ end }}