Merge pull request #184 from zalabhavy/cards

Hover effects added on cards
Avdhesh-Varshney · Jul 5, 2024 · 80fbe19 · 80fbe19
2 parents 6c8c41f + 050ee43
commit 80fbe19
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/src/css/Home.css b/src/css/Home.css
@@ -131,6 +131,19 @@
   background-color: #eef1ff;
 }
 
+.feat-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.feat-card:hover img {
+  transform: scale(1.05);
+}
+
+.feat-card:hover .card-line {
+  width: 100%;
+}
+
 .feat-card-content {
   display: flex;
   flex-direction: column;
@@ -171,7 +184,10 @@
   border-radius: 100%;
 }
 
-
+.feat-card:hover, .feat-card-2:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
 
 .gap-10{
   gap: 40px;