add fun image hover effect playground

src/components/ImageUpload.css

@@ -19,7 +19,7 @@
 }
 
 .imgUpload {
-  max-width: 142%;
+  max-width: 300px;
   height: auto;
   border-radius: 5px;
   box-shadow: mediumslateblue 0px 1px 7px 0px;

src/components/ImageUpload.tsx

@@ -13,7 +13,12 @@ const ImageUpload = ({ storage }: ImageUploadProps) => {
   const [imageUpload, setImageUpload] = useState<File|null>(null);
   const [imageList, setImageList] = useState<string[]>([]);
   const [isUploading, setIsUploading] = useState<boolean>(false);
-  const [somefin, toggle, exportableFunction] = useDisplayImageInfo();
+  const [
+    somefin,
+    toggle,
+    exportableFunction,
+    addZoomToCursor,
+  ] = useDisplayImageInfo();
   console.count(somefin?.nothin);
 
   useEffect(() => {
@@ -65,7 +70,16 @@ const ImageUpload = ({ storage }: ImageUploadProps) => {
             src={url}
             alt='memory snapshot'
             key={url + id}
+            id={url + id}
             onClick={exportableFunction}
+            onMouseEnter={() => {
+              const hiImFromTheDom = document.getElementById(`${url + id}`);
+              addZoomToCursor(hiImFromTheDom, 1.2);
+            }}
+            onMouseLeave={() => {
+              const hiImFromTheDom = document.getElementById(`${url + id}`);
+              if (hiImFromTheDom) hiImFromTheDom.style.transform = 'scale(1)';
+            }}
           />
         ))}
       </div>

src/weCanDoHooksNow/displayImageInfo.ts

@@ -15,7 +15,42 @@ const useDisplayImageInfo = () => {
     setSomefin({ nothin: `${imFeelinLucky}` });
   };
 
-  return [somefin, toggle, exportableFunction] as const;
+  /**
+   * Hi, I'm addZoomToCursor and I'm fabulous.
+   * I take in an element from DOM and I add a magical zooming effect around the cursor. IT comes to life.
+   * I don't return anything you nerds <3 => VOID
+   */
+  const addZoomToCursor = (hoveredElement: HTMLElement | null, zoomFactor = 1.2): void => {
+    if (!hoveredElement) return;
+    //smooth zoom animations n such
+    hoveredElement.style.transition = 'transform 0.2s ease-out';
+
+    const rect = hoveredElement.getBoundingClientRect();
+    document.addEventListener('mousemove', event => {
+      const mouseX = event.clientX - rect.left;
+      const mouseY = event.clientY - rect.top;
+      const centerX = rect.width / 2;
+      const centerY = rect.height / 2;
+      const deltaX = mouseX - centerX;
+      const deltaY = mouseY - centerY;
+      hoveredElement.style.transformOrigin = `${event.clientX}px ${event.clientY}px`;
+
+      // Calculate the new scale value based on the mouse position
+      const distance = Math.sqrt(deltaX**2 + deltaY**2);
+      const scale = 1 + distance/100;
+      // const scale = Math.min(zoomFactor, 1 + distance/100);
+
+      // Apply the new scaling to the element
+      hoveredElement.style.transform = `scale(${scale})`;
+    });
+  };
+
+  return [
+    somefin,
+    toggle,
+    exportableFunction,
+    addZoomToCursor,
+  ] as const;
 };
 
 export default useDisplayImageInfo;