Hover State

.gitignore

@@ -31,4 +31,7 @@ yarn-error.log*
 .env.production.local
 
 # vercel
-.vercel
+.vercel
+
+# dev
+framework

components/product/ProductCard/ProductCard.module.css

@@ -9,8 +9,8 @@
       transform: scale(0.98);
     }
 
-    & .product-image {
-      transform: scale(1.05);
+    & .productImage {
+      transform: scale(1.2725);
     }
 
     & .productTitle > span,
@@ -44,10 +44,6 @@
     }
   }
 
-  & .product-image {
-    @apply transform transition-transform duration-500;
-  }
-
   &:nth-child(6n + 1) .squareBg {
     @apply bg-violet;
   }
@@ -135,7 +131,8 @@
   }
 }
 
-.image {
+.productImage {
+  @apply transform transition-transform duration-500;
   object-fit: cover;
   transform: scale(1.2);
 }

components/product/ProductCard/ProductCard.tsx

@@ -82,7 +82,7 @@ const ProductCard: FC<Props> = ({
                 quality="85"
                 src={src}
                 alt={p.name}
-                className={s.image}
+                className={s.productImage}
                 width={imgWidth}
                 sizes={imgSizes}
                 height={imgHeight}