From 75525dcf7cba4a14daa487ce7d2bb999c2b5ca33 Mon Sep 17 00:00:00 2001
From: Jordian0 <bhajji.bv@gmail.com>
Date: Mon, 21 Oct 2024 22:57:59 +0530
Subject: [PATCH] added pop animation on product and slide animation on
 color-box

---
 style.css | 34 +++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/style.css b/style.css
index 9963a9e..74f8312 100644
--- a/style.css
+++ b/style.css
@@ -610,6 +610,23 @@ button {
 
 .col-2 .controller {
   width: 90%;
+  z-index: 9;
+  overflow: hidden;
+}
+.col-2:hover .controller {
+    animation: scale-up 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+}
+
+@keyframes scale-up {
+    0% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+
+    100% {
+        -webkit-transform: scale(1.1);
+        transform: scale(1.1);
+    }
 }
 
 .color-box {
@@ -620,8 +637,23 @@ button {
   border-radius: 20px 0 0 20px;
   height: 100%;
   width: 80%;
-  z-index: -1;
   transform: translateX(150px);
+  transition: transform 0.5s ease;
+}
+.col-2:hover .color-box {
+    animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+@keyframes slide-left {
+    0% {
+        -webkit-transform: translateX(20);
+        transform: translateX(20);
+    }
+
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
 }
 
 .price {