add different approach on hover animation

components/product/ProductCard/ProductCard.module.css

@@ -35,6 +35,26 @@
     &:nth-child(6n + 6) .wishlistButton {
       @apply bg-cyan text-white;
     }
+
+    & .squareBg {
+      @apply bg-white;
+    }
+
+    &:nth-child(6n + 1) .squareBg {
+      @apply bg-white;
+    }
+
+    &:nth-child(6n + 5) .squareBg {
+      @apply bg-white;
+    }
+
+    &:nth-child(6n + 3) .squareBg {
+      @apply bg-white;
+    }
+
+    &:nth-child(6n + 6) .squareBg {
+      @apply bg-white;
+    }
   }
 
   &:nth-child(6n + 1) .squareBg {
@@ -58,7 +78,7 @@
 .productTitle > span,
 .productPrice,
 .wishlistButton {
-  @apply transition ease-in-out duration-300;
+  @apply transition ease-in-out duration-500;
 }
 
 .squareBg {

components/product/ProductCard/ProductCard.tsx

@@ -36,7 +36,7 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
       >
         <div className="absolute z-10 inset-0 flex items-center justify-center">
           <img
-            className="w-full object-cover transform scale-90 hover:scale-100 transition-transform duration-500"
+            className="w-full object-cover transform scale-75 hover:scale-90 transition-transform duration-500"
             src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>