Merge pull request #2418 from Mahimatestgithub/socialicons

Added Hovering effect to social icons in Footer issue -#2388
codervivek5 · Oct 29, 2024 · 99408ff · 99408ff
2 parents 91bca48 + 3c717ec
commit 99408ff
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 11 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -157,13 +157,8 @@ export default function App() {
           {/* Other user routes */}
           <Route path="contributors" element={<Contributors />} />
           <Route path="about-us" element={<AboutUs />} />
-<<<<<<< HEAD
           <Route path="help" element={<Help />} /> {/* Help page route */}
           <Route path="privacy-policy" element={<Privacy />} />
-=======
-          <Route path="help" element={<Help />} />
-          <Route path="privacy" element={<Privacy />} />
->>>>>>> 5eed12d9 (revert sadaf commit for category changes)
           {/* Privacy policy page route */}
           <Route path="cart" element={<Cart />} /> 
           <Route

diff --git a/src/User/components/Footer/Footer.css b/src/User/components/Footer/Footer.css
@@ -1,3 +1,4 @@
+/* Existing Footer Styles */
 .footer {
   background-color: #2e2e2e;
   color: #fff;
@@ -9,13 +10,11 @@
 .footer-top {
   display: flex;
   flex-direction: column;
-  /* gap: 20px; */
   align-items: center;
 }
 
 .footer-top .logo img {
   width: 80px;
-  /* Adjusted size for better visibility */
 }
 
 .footer-top .social-media {
@@ -33,7 +32,6 @@
 
 .footer-top .social-icons a img {
   width: 30px;
-  /* Adjusted size for consistency */
 }
 
 .footer-top .contact-info,
@@ -47,7 +45,6 @@
   align-items: center;
   justify-content: center;
   gap: 10px;
-  /* Space between image and text */
   margin: 5px 0;
   color: #fff;
   text-decoration: none;
@@ -60,7 +57,6 @@
 
 .footer-top .address img {
   width: 24px;
-  /* Adjusted size for better alignment */
   height: 24px;
 }
 
@@ -95,6 +91,28 @@
   text-decoration: underline;
 }
 
+/* Social Media Icon Hover Effects */
+.footer-top .social-icons a {
+  transition: transform 0.3s, filter 0.3s;
+}
+
+.footer-top .social-icons a:hover {
+  transform: scale(1.1);
+}
+
+.footer-top .social-icons a:nth-child(1):hover img {
+  filter: brightness(1.2) saturate(1.2);
+}
+
+.footer-top .social-icons a:nth-child(2):hover img {
+  filter: brightness(1.2) saturate(1.2);
+}
+
+.footer-top .social-icons a:nth-child(6):hover img {
+  filter: brightness(1.2) saturate(1.2);
+}
+
+/* Responsive Styles */
 @media (min-width: 768px) {
   .footer-top {
     flex-direction: row;
@@ -123,4 +141,4 @@
     text-align: right;
     justify-content: flex-end;
   }
-}
+}
diff --git a/src/User/components/Footer/Footer.jsx b/src/User/components/Footer/Footer.jsx
@@ -161,6 +161,9 @@ const Footer = () => {
             </p>
           </div>
           <br />
+
+
+
           <div className="social-media flex flex-col justify-center items-center">
             <p className="text-sm text-center text-gray-400 sm:items-center underline">
               SOCIALS: