From 9925a9b3c4f4edb5a151f1d58575de1db617d2a0 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Wed, 29 Jan 2025 00:29:20 +0100
Subject: [PATCH] Lib: Add optional image zoom on mouse hover

---
 src/lib/components/LazyImage.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/LazyImage.svelte b/src/lib/components/LazyImage.svelte
index f103abe..18659c3 100644
--- a/src/lib/components/LazyImage.svelte
+++ b/src/lib/components/LazyImage.svelte
@@ -21,6 +21,9 @@
 
     /** Additional classes to insert */
     imgclass?: string;
+
+    /** Slightly zoom the image on mouse-hover */
+    hoverzoom?: boolean;
   }
 
   let {
@@ -30,6 +33,7 @@
     imgstyle = undefined,
     containerstyle = undefined,
     imgclass = "",
+    hoverzoom = false,
     ...restProps
   }: LazyImageProps = $props();
 
@@ -51,16 +55,16 @@
 <div
   use:lazyload
   onLazyVisible={lazy_visible_handler}
+  class="overflow-hidden"
   style="aspect-ratio: {imgwidth} / {imgheight}; {containerstyle ??
     ''}; max-width: {imgwidth}px; max-height: {imgheight}px"
 >
-  <!-- TODO: If an image disappears and reappears, it will be loaded again... -->
   {#if load}
     {#await fetch_image_base64(src) then data}
       <img
         src={data}
         use:img_opacity_handler
-        class="bg-surface-100 transition-opacity {imgclass}"
+        class="bg-surface-100 transition-all {imgclass} {hoverzoom ? 'hover:scale-105' : ''}"
         style="opacity: 0; transition-duration: 300ms; {imgstyle ?? ''}"
         draggable="false"
         {...restProps}