diff --git a/assets/css/bootstrap-style.css b/assets/css/bootstrap-style.css
index 6aa98d6..596ee70 100644
--- a/assets/css/bootstrap-style.css
+++ b/assets/css/bootstrap-style.css
@@ -12938,11 +12938,22 @@ textarea.form-control-lg {
   max-height: 40vh;
 }
 
-.thumbnail-hover-dark img {
-  transition: opacity 0.2s;
+.thumbnail-hover-dark {
+  overflow: hidden;
 }
-.thumbnail-hover-dark img:hover {
-  opacity: 0.8;
+.thumbnail-hover-dark .thumbnail-wrapper {
+  overflow: hidden;
+}
+.thumbnail-hover-dark .thumbnail-wrapper img {
+  transition: all 0.3s ease;
+}
+.thumbnail-hover-dark .thumbnail-wrapper img:hover {
+  filter: brightness(0.85);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .thumbnail-hover-dark .thumbnail-wrapper img:hover {
+    transform: scale(1.005);
+  }
 }
 
 h1, .h1 {
diff --git a/assets/css/bootstrap-style.scss b/assets/css/bootstrap-style.scss
index bae5aa6..0c1218b 100644
--- a/assets/css/bootstrap-style.scss
+++ b/assets/css/bootstrap-style.scss
@@ -175,11 +175,29 @@ $utilities: map-merge(
   max-height: 40vh;
 }
 
-.thumbnail-hover-dark img {
-  transition: opacity 0.2s;  // Smooth transition when hovering
+/// TODO: need usability tests to determine whether these variables are ok; can also cause weird moire/pixel level scaling issues with novel thumbnails (especially the default cover which has intricate details)
+.thumbnail-hover-dark {
+  overflow: hidden;
 
-  &:hover {
-    opacity: 0.8;  // Apply darkening effect
+  /// Wrapper to maintain rounded corners during zoom effect
+  /// The wrapper hides overflow and applies rounded corners,
+  /// while allowing the image inside to scale without breaking the rounded shape
+  .thumbnail-wrapper {
+    overflow: hidden;
+
+    img {
+      transition: all 0.3s ease;
+
+      &:hover {
+        filter: brightness(0.85);
+      }
+
+      @media (prefers-reduced-motion: no-preference) {
+        &:hover {
+          transform: scale(1.005);
+        }
+      }
+    }
   }
 }
 
diff --git a/assets/views/fragments/novel-tn.jet.html b/assets/views/fragments/novel-tn.jet.html
index 9091625..8182af2 100644
--- a/assets/views/fragments/novel-tn.jet.html
+++ b/assets/views/fragments/novel-tn.jet.html
@@ -5,7 +5,9 @@
       <div class="col-4 col-md-2">
         <a href="/novel/{{ .ID }}" class="text-decoration-none">
           <div class="ratio ratio-3x4">
-            <img src="{{ .CoverURL }}" alt="{{ .Title }}" class="img-fluid rounded object-fit-cover" loading="lazy" />
+            <div class="thumbnail-wrapper rounded overflow-hidden">
+              <img src="{{ .CoverURL }}" alt="{{ .Title }}" class="img-fluid rounded object-fit-cover w-100 h-100" loading="lazy" />
+            </div>
           </div>
         </a>
       </div>
diff --git a/assets/views/fragments/thumbnail-dt.jet.html b/assets/views/fragments/thumbnail-dt.jet.html
index 9ef6e19..d7d2045 100644
--- a/assets/views/fragments/thumbnail-dt.jet.html
+++ b/assets/views/fragments/thumbnail-dt.jet.html
@@ -29,15 +29,17 @@
     </div>
   </div>
     <div class="ratio ratio-1x1">
-      {{- if (.XRestrict > 0 && hideR18 != "" && hideR18G != "") || (.XRestrict == 2 && hideR18G != "") }}
-      <!-- When the user has enabled hideR18 or hideR18G, display a plain thumbnail instead -->
-      <img src="/img/nsfw.png" alt="{{ .Title }}" class="img-fluid object-fit-cover rounded" loading="lazy" />
-      <!-- When the user has enabled hideAi, display a plain thumbnail instead -->
-      {{- else if AiType == 2 && hideAi }}
-      <img src="/img/ai.png" alt="{{ .Title }}" class="img-fluid object-fit-cover rounded" loading="lazy" />
-      {{- else }}
-      <img src="{{ .Thumbnail }}" alt="{{ .Title }}" class="img-fluid object-fit-cover rounded" loading="lazy" />
-      {{- end }}
+      <div class="thumbnail-wrapper rounded overflow-hidden">
+        {{- if (.XRestrict > 0 && hideR18 != "" && hideR18G != "") || (.XRestrict == 2 && hideR18G != "") }}
+        <!-- When the user has enabled hideR18 or hideR18G, display a plain thumbnail instead -->
+        <img src="/img/nsfw.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
+        <!-- When the user has enabled hideAi, display a plain thumbnail instead -->
+        {{- else if AiType == 2 && hideAi }}
+        <img src="/img/ai.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
+        {{- else }}
+        <img src="{{ .Thumbnail }}" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
+        {{- end }}
+      </div>
     </div>
     <!-- When an artwork is a ugoira -->
     <!-- Creates a centered, circular overlay (60x60px) with semi-transparent black background.