Add hover zoom to images in projects/MDX

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>
   )