Added zoom effect to cover links when mouse on hover

svera · Jan 15, 2025 · 0dac580 · 0dac580
1 parent 2cf6d5f
commit 0dac580
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/internal/webserver/embedded/css/display.css b/internal/webserver/embedded/css/display.css
@@ -121,3 +121,15 @@ a.collapse-control.collapsed:after {
 .datetime::first-letter {
     text-transform: capitalize;
 }
+
+.zoomable {
+    overflow: hidden;
+}
+
+.zoomable img {
+    transition: all .3s ease;
+}
+
+.zoomable img:hover {
+    transform: scale(1.1);
+}
diff --git a/internal/webserver/embedded/views/partials/cover.html b/internal/webserver/embedded/views/partials/cover.html
@@ -1,9 +1,11 @@
 <div class="position-relative mb-3 border border-2 cover-background">
-    {{if not .DisableCoverMainLink}}<a href="/documents/{{.Document.Slug}}" class="text-decoration-none">{{end}}
+    {{if not .DisableCoverMainLink}}<a href="/documents/{{.Document.Slug}}" class="text-decoration-none">
+        <div class="zoomable">{{end}}
         <picture>
             <source srcset="/documents/{{.Document.Slug}}/cover" alt='{{t .Lang "\"%s\" cover" .Document.Title}}' />
             <img src="/images/generic.jpg" loading="lazy" class="cover img-fluid" alt='{{t .Lang "\"%s\" cover" .Document.Title}}'>
         </picture>
+        {{if not .DisableCoverMainLink}}</div>{{end}}
         <div class="card-img-overlay card-body d-none">
             <h5 class="card-title text-center text-truncate">{{.Document.Title}}</h5>
             {{if .Document.Authors}}