Merge pull request #347 from shobhit15082003/hover

feat: Added hover pop up
PriyaGhosal · Oct 9, 2024 · 5056765 · 5056765
2 parents b16c0cf + edab7ac
commit 5056765
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 6 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -630,6 +630,54 @@ button:hover {
   margin-inline: auto;
 }
 
+#category-card1{
+  transition: transform 0.3s ease;
+}
+
+#category-card1:hover {
+  transform: scale(1.025);
+}
+
+#category-card2{
+  transition: transform 0.3s ease;
+}
+
+#category-card2:hover {
+  transform: scale(1.025);
+}
+
+#category-card3{
+  transition: transform 0.3s ease;
+}
+
+#category-card3:hover {
+  transform: scale(1.025);
+}
+
+#category-card4{
+  transition: transform 0.3s ease;
+}
+
+#category-card4:hover {
+  transform: scale(1.025);
+}
+
+#category-card5{
+  transition: transform 0.3s ease;
+}
+
+#category-card5:hover {
+  transform: scale(1.025);
+}
+
+#category-card6{
+  transition: transform 0.3s ease;
+}
+
+#category-card6:hover {
+  transform: scale(1.025);
+}
+
 /*-----------------------------------*\
   #ABOUT
 \*-----------------------------------*/

diff --git a/index.html b/index.html
@@ -271,7 +271,7 @@ <h2 class="headline-md text-center section-title" data-aos="fade-down">
           <ul class="grid-list">
 
             <li>
-              <div class="card category-card" data-aos="fade-right">
+              <div class="card category-card" data-aos="fade-right" id="category-card1">
 
                 <div class="card-icon">
                   <img src="./assets/images/category-1.svg" width="72" height="72" loading="lazy"
@@ -290,7 +290,7 @@ <h3 class="title-lg">Data Science</h3>
             </li>
 
             <li>
-              <div class="card category-card" data-aos="fade-right">
+              <div class="card category-card" data-aos="fade-right" id="category-card2">
 
                 <div class="card-icon">
                   <img src="./assets/images/category-2.svg" width="72" height="72" loading="lazy"
@@ -309,7 +309,7 @@ <h3 class="title-lg">UI/UX Design</h3>
             </li>
 
             <li>
-              <div class="card category-card" data-aos="fade-right">
+              <div class="card category-card" data-aos="fade-right" id="category-card3">
 
                 <div class="card-icon">
                   <img src="./assets/images/category-3.svg" width="72" height="72" loading="lazy"
@@ -328,7 +328,7 @@ <h3 class="title-lg">Modern Physics</h3>
             </li>
 
             <li>
-              <div class="card category-card" data-aos="fade-right">
+              <div class="card category-card" data-aos="fade-right" id="category-card4">
 
                 <div class="card-icon">
                   <img src="./assets/images/category-4.svg" width="72" height="72" loading="lazy"
@@ -347,7 +347,7 @@ <h3 class="title-lg">Music Production</h3>
             </li>
 
             <li>
-              <div class="card category-card" data-aos="fade-right">
+              <div class="card category-card" data-aos="fade-right" id="category-card5">
 
                 <div class="card-icon">
                   <img src="./assets/images/marketing.jpeg" width="72" height="72" loading="lazy"
@@ -366,7 +366,7 @@ <h3 class="title-lg">Digital Marketing</h3>
             </li>
 
             <li>
-              <div class="card category-card" data-aos="fade-right">
+              <div class="card category-card" data-aos="fade-right" id="category-card6">
 
                 <div class="card-icon">
                   <img src="./assets/images/category-5.svg" width="72" height="72" loading="lazy" alt="Finances icon">