From 8178e8a5fae37292f010fa8cf8f90c70d0bb881c Mon Sep 17 00:00:00 2001
From: anuj <anujkashyap@email.com>
Date: Mon, 27 Jan 2025 08:42:38 -0800
Subject: [PATCH] hover effect

---
 expanding-cards/script.js | 6 ++++--
 expanding-cards/style.css | 7 +++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/expanding-cards/script.js b/expanding-cards/script.js
index 68d6b5c..f4738f9 100644
--- a/expanding-cards/script.js
+++ b/expanding-cards/script.js
@@ -1,14 +1,16 @@
 const panels = document.querySelectorAll('.panel')
 
 panels.forEach(panel => {
-    panel.addEventListener('click', () => {
-        removeActiveClasses()
+    panel.addEventListener('mouseenter', () => {
+        removeActiveClasses();
+        panel.classList.add('skew-restore');
         panel.classList.add('active')
     })
 })
 
 function removeActiveClasses() {
     panels.forEach(panel => {
+        panel.classList.remove('skew-restore')
         panel.classList.remove('active')
     })
 }
\ No newline at end of file
diff --git a/expanding-cards/style.css b/expanding-cards/style.css
index a6fe024..43c6e39 100644
--- a/expanding-cards/style.css
+++ b/expanding-cards/style.css
@@ -28,7 +28,9 @@ body {
   color: #fff;
   cursor: pointer;
   flex: 0.5;
+  transform: skew(20deg);
   margin: 10px;
+  z-index: 999;
   position: relative;
   -webkit-transition: all 700ms ease-in;
 }
@@ -46,8 +48,13 @@ body {
   flex: 5;
 }
 
+.skew-restore{
+  transform: skew(0deg);
+}
+
 .panel.active h3 {
   opacity: 1;
+  color: rgb(51, 203, 9);
   transition: opacity 0.3s ease-in 0.4s;
 }