From 8078c0b8326c401ef565a0de8049dc191c611ad4 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Wed, 21 Oct 2020 19:51:46 -0300
Subject: [PATCH] add different approach on hover animation

---
 .../ProductCard/ProductCard.module.css        | 22 ++++++++++++++++++-
 .../product/ProductCard/ProductCard.tsx       |  2 +-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index d0ea6d80c..a2edab7d0 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/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 {
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index e64f79468..7c0a15573 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/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>