switch to cross fade

acmucsd · Apr 29, 2024 · 2e8805a · 2e8805a
1 parent 6bf375c
commit 2e8805a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 24 deletions.
diff --git a/src/components/store/ItemCard/index.tsx b/src/components/store/ItemCard/index.tsx
@@ -42,22 +42,9 @@ const ItemCard = ({
   return (
     <article className={`${styles.itemCard} ${className}`}>
       <Link href={href} className={styles.linkWrapper}>
-        <div
-          className={styles.imageWrapper}
-          onPointerMove={e => {
-            const rect = e.currentTarget.getBoundingClientRect();
-            e.currentTarget.style.setProperty(
-              '--mouse-x',
-              `${((e.clientX - rect.left) / rect.width) * 100}%`
-            );
-            e.currentTarget.style.setProperty(
-              '--mouse-y',
-              `${((e.clientY - rect.top) / rect.width) * 100}%`
-            );
-          }}
-        >
-          <Image src={first} alt={title} fill />
-          <Image className={styles.second} src={second} alt="" aria-hidden fill />
+        <div className={styles.imageWrapper}>
+          <Image className={styles.first} src={first} alt={title} fill />
+          <Image src={second} alt="" aria-hidden fill />
         </div>
         <div className={styles.details}>
           <p className={styles.title}>{title}</p>

diff --git a/src/components/store/ItemCard/style.module.scss b/src/components/store/ItemCard/style.module.scss
@@ -22,8 +22,6 @@
   }
 
   .imageWrapper {
-    --mouse-x: 50%;
-    --mouse-y: 50%;
     background-color: var(--theme-surface-1);
     overflow: hidden;
     // Enforce a square image while allowing the card to be squished
@@ -34,15 +32,14 @@
       object-fit: cover;
     }
 
-    .second {
-      clip-path: circle(0% at var(--mouse-x) var(--mouse-y));
-      transition: clip-path 0.2s;
+    .first {
+      transition: opacity 0.5s;
       z-index: 1;
     }
   }
 
-  &:hover .imageWrapper .second {
-    clip-path: circle(160% at var(--mouse-x) var(--mouse-y));
+  &:hover .imageWrapper .first {
+    opacity: 0;
   }
 
   .details {

diff --git a/src/components/store/ItemCard/style.module.scss.d.ts b/src/components/store/ItemCard/style.module.scss.d.ts
@@ -1,12 +1,12 @@
 export type Styles = {
   cost: string;
   details: string;
+  first: string;
   icons: string;
   imageWrapper: string;
   itemCard: string;
   linkWrapper: string;
   outOfStock: string;
-  second: string;
   title: string;
 };