Merge pull request #1596 from SuhainaFathimaM/main

Impoved hovering effects of the page #128

css/categories.css

@@ -85,6 +85,12 @@
  margin-right: 20px;
 }
 
+#category-grid .category-container:hover {
+ transform: scale(1.05); /* Zoom in slightly */
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
+ transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+}
+
 .category {
  width: 100%;
  height: 100%;
@@ -93,6 +99,12 @@
 
 }
 
+#category-grid .show-items-btn:hover {
+ background-color: #2874F0; /* Change button background color */
+ color: white; /* Change button text color */
+ transition: background-color 0.3s ease, color 0.3s ease; /* Add smooth transitions */
+}
+
 .category:hover {
  transform: scale(1.1025);
 }
@@ -110,6 +122,7 @@
 #category-grid img:hover {
  transform: scale(1.1);
  opacity: 0.82;
+ transition: transform 0.3s ease-in-out;
 }
 
 #categories {

css/index.css

@@ -485,6 +485,13 @@ Search Bar
 #s1-product .products {
  margin: 0 auto;
  padding: 5px;
+ transition: transform 0.3s ease-in-out;
+
+}
+
+#s1-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
 }
 
 #s2-product .products {
@@ -739,3 +746,7 @@ ul{
  color:black ;
 
 }
+
+#moreLinksDropdown:hover .dropdown-menu {
+ opacity: 1; 
+}

index.html

@@ -445,6 +445,234 @@ <h4>Login</h4>
  background-color: #2874F0;
  }
 
+ #seletcYourChoice-product .products {
+ margin: 0 auto;
+ padding: 5px;
+ transition: transform 0.3s ease-in-out;
+ }
+
+ #seletcYourChoice-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
+ }
+
+ /* Hover effect for "Best Deal for You" section */
+#best-deal-product .products {
+ margin: 0 auto;
+ padding: 5px;
+ transition: transform 0.3s ease-in-out;
+}
+
+#best-deal-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
+}
+
+/* Hover effect for "Shop Now Under 500 Rs" section */
+#shopUnder500-product .products {
+ margin: 0 auto;
+ padding: 5px;
+ transition: transform 0.3s ease-in-out;
+}
+
+#shopUnder500-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
+}
+
+/* Hover effect for "Top Selection" section */
+#top-selection-product .products {
+ margin: 0 auto;
+ padding: 5px;
+ transition: transform 0.3s ease-in-out;
+}
+
+#top-selection-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
+}
+
+/* Hover effect for "Mobile Phone Under 15000 Rs" section */
+#mobileUnder15000-product .products {
+ margin: 0 auto;
+ padding: 5px;
+ transition: transform 0.3s ease-in-out;
+}
+
+#mobileUnder15000-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
+}
+
+/* Hover effect for "Suggested for You" section */
+#rendom-product .products {
+ margin: 0 auto;
+ padding: 5px;
+ transition: transform 0.3s ease-in-out;
+}
+
+#rendom-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
+}
+
+/* Hover effect for "Best of Electronics" section */
+#bestOfElectronics-product .products {
+ margin: 0 auto;
+ padding: 5px;
+ transition: transform 0.3s ease-in-out;
+}
+
+#bestOfElectronics-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
+}
+
+/* Hover effect for "Best Deal for You" section */
+#best-deal-product .products {
+ margin: 0 auto;
+ padding: 5px;
+ transition: transform 0.3s ease-in-out;
+}
+
+#best-deal-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
+}
+
+/* Hover effect for "Shop Now Under 500 Rs" section */
+#shopUnder500-product .products {
+ margin: 0 auto;
+ padding: 5px;
+ transition: transform 0.3s ease-in-out;
+}
+
+#shopUnder500-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
+}
+
+/* Hover effect for "Top Selection" section */
+#top-selection-product .products {
+ margin: 0 auto;
+ padding: 5px;
+ transition: transform 0.3s ease-in-out;
+}
+
+#top-selection-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
+}
+
+/* Hover effect for "Select Your Choice" section */
+#seletcYourChoice-product .products {
+ margin: 0 auto;
+ padding: 5px;
+ transition: transform 0.3s ease-in-out;
+}
+
+#seletcYourChoice-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
+}
+
+/* Hover effect for "Mobile Phone Under 15000 Rs" section */
+#mobileUnder15000-product .products {
+ margin: 0 auto;
+ padding: 5px;
+ transition: transform 0.3s ease-in-out;
+}
+
+#mobileUnder15000-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
+}
+
+/* Hover effect for "Suggested for You" section */
+#rendom-product .products {
+ margin: 0 auto;
+ padding: 5px;
+ transition: transform 0.3s ease-in-out;
+}
+
+#rendom-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
+}
+
+/* Hover effect for "Best of Electronics" section */
+#bestOfElectronics-product .products {
+ margin: 0 auto;
+ padding: 5px;
+ transition: transform 0.3s ease-in-out;
+}
+
+#bestOfElectronics-product .products:hover {
+ transform: scale(1.1);
+ opacity: 0.82;
+}
+
+/* Hover effect for FAQ section */
+.faq-card {
+ background: white;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ padding: 10px;
+ text-align: left;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.faq-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
+}
+
+
+/* Hover effect for "Search Bar" */
+#searchbar input {
+ transition: border-color 0.3s ease-in-out;
+}
+
+#searchbar input:focus {
+ border-color: #2874F0; /* Change the border color on focus */
+}
+
+/* Hover effect for "Account Dropdown" */
+#navbarDropdown .nav-link img {
+ transition: transform 0.3s ease-in-out;
+}
+
+#navbarDropdown .nav-link img:hover {
+ transform: scale(1.1);
+}
+
+/* Hover effect for "Cart Icon" */
+.cartLogoandname img {
+ transition: transform 0.3s ease-in-out;
+}
+
+.cartLogoandname img:hover {
+ transform: scale(1.1);
+}
+
+/* Hover effect for "Become a Seller Icon" */
+.navItem4 img {
+ transition: transform 0.3s ease-in-out;
+}
+
+.navItem4 img:hover {
+ transform: scale(1.1);
+}
+
+/* Hover effect for "More Links Dropdown" */
+#moreLinksDropdown .nav-link img {
+ transition: transform 0.3s ease-in-out;
+}
+
+#moreLinksDropdown .nav-link img:hover {
+ transform: scale(1.1);
+}
+
  @media screen and (max-width: 1200px) {
  .signupin .leftpanal {
  width: 30vw;