From b7c1b27bf2aa198cdd43c2301f8e8c4ca8c1708d Mon Sep 17 00:00:00 2001
From: Vaibhav Kumar <vaibhavkumar5158@gmail.com>
Date: Fri, 4 Oct 2024 22:18:54 +0530
Subject: [PATCH] Add hover effects to the gadgets images

Add hover effects to the gadgets images
and when we move cursor to "ADD TO CART" color changes .
---
 style.css | 40 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/style.css b/style.css
index 07a2970b..f383d7c1 100644
--- a/style.css
+++ b/style.css
@@ -200,6 +200,7 @@ button:hover {
     top: 8px;
 }
 
+
 .col-2 {
     position: relative;
     flex-basis: 60%;
@@ -270,7 +271,7 @@ button:hover {
 }
 
 .add-btn p {
-    font-size: 16px;
+    font-size: 10px;
 }
 
 .add-btn:hover {
@@ -434,6 +435,43 @@ button:hover {
 
 
 
+/* Add a transition for smooth hover effect */
+.col-2 .controller {
+    transition: transform 0.3s ease, opacity 0.9s ease;
+    opacity: 1;
+
+}
+
+.col-2 .add-btn {
+    /* transition: opacity 0.3s ease;
+    opacity: 0; Initially hidden */
+    box-shadow: 0 10px 20px rgba(19, 101, 41, 0.216)
+    
+}
+.col-2 .add-btn:hover {
+        background-color:#65a80d;
+}
+
+.col-2:hover .controller {
+    transform: scale(1.1); /* Enlarge the image slightly */
+    opacity: 0.8; /* Reduce opacity slightly */
+}
+
+.col-2:hover .add-btn {
+    opacity: 1; /* Show add-to-cart button on hover */
+}
+
+/* Optional: Add some styling to the color box on hover as well */
+.col-2 .color-box {
+    transition: background-color red 0.3s ease;
+}
+
+.col-2:hover .color-box {
+    background-color: rgb(92,17,41); /* Change background color on hover */
+}
+
+
+
 
 /* -----------------------------------------------Responsiveness----------------------------------------------------- */