Merge pull request #5019 from Akshun-01/cardHover

Add green glow hover effect to cards
layer5io · Oct 28, 2023 · 4879377 · 4879377
2 parents 6be9e73 + e7aa89b
commit 4879377
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/components/Learn-Components/Card-Component/index.js b/src/components/Learn-Components/Card-Component/index.js
@@ -40,7 +40,7 @@ const CardComponent = ({ tutorial, path, courseCount }) => {
         <Link to={path} className="card-link">
           <div
             style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}
-            className="card-parent"
+            className="card-parent card-active"
           >
 
             <div>

diff --git a/src/components/Learn-Components/Card-Component/learn-card.style.js b/src/components/Learn-Components/Card-Component/learn-card.style.js
@@ -6,6 +6,15 @@ const CardWrapper = styled.div`
     margin: auto;
     border-radius: 1rem;
 
+    .card-active{
+        cursor: pointer;
+        transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
+
+        &:hover{
+            box-shadow: rgba(0, 179, 158, 0.9) 0px 0px 19px 6px;
+        }
+    }
+
     .card-link{
         color: black;
     }