Add hover effect to amazon clone.

dhairyagothi · Jan 9, 2025 · 24e57f5 · 24e57f5
1 parent dd7b5a3
commit 24e57f5
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/public/Amazon_Clone/style.css b/public/Amazon_Clone/style.css
@@ -49,7 +49,6 @@ nav {
     align-items: center;
 }
 
-
 .nav-center {
     height: 40px;
     display: flex;
@@ -185,7 +184,6 @@ nav {
     background-color: #222f3d;
     color: white;
     justify-content: start;
-
 }
 
 .nav-options * {
@@ -319,6 +317,12 @@ main {
     padding: 1rem;
     cursor: pointer;
     overflow: hidden;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.item-card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }
 
 .item-card img {
@@ -421,7 +425,6 @@ main {
     text-decoration: none;
     color: white;
     margin-left: 1rem;
-
 }
 
 /* Small Devices */
@@ -476,7 +479,6 @@ main {
         height: 4vw;
     }
 
-
     .item-card {
         height: 25vw;
         flex: 1 0 20vw;