From 4acbf3ef8a3942a63d5996da94cb85736a349e1c Mon Sep 17 00:00:00 2001
From: Nathan Cummins <nathan@nathancummins.com.au>
Date: Thu, 11 Dec 2025 11:11:38 +1030
Subject: [PATCH] Add hover zoom to images in projects/MDX

---
 src/components/MDX/IMG.astro | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/MDX/IMG.astro b/src/components/MDX/IMG.astro
index 6dfd1d2..6af8d23 100644
--- a/src/components/MDX/IMG.astro
+++ b/src/components/MDX/IMG.astro
@@ -5,12 +5,19 @@ const { src, alt } = Astro.props;
 import { getImageByPath } from "@lib/utils";
 
 const image = getImageByPath(src);
+
+// width of container is 896, width of image is set to 1344 to allow for hover zoom
 ---
 
 {
   image && (
     <div class="my-8">
-      <Image src={image} alt={alt} width={896} />
+      <Image
+        src={image}
+        alt={alt}
+        width={1344}
+        class="transition ease-in-out lg:hover:scale-150"
+      />
       <div class="mt-2 block w-full text-center text-sm italic">{alt}</div>
     </div>
   )