From 6de3c0227d756ecb4a1f05b05a6717a4f071d60f Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Tue, 12 Dec 2023 21:24:22 -0800
Subject: [PATCH] Add "grow on hover" card

---
 index.html | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/index.html b/index.html
index 462d4d4..f5ddad4 100644
--- a/index.html
+++ b/index.html
@@ -284,6 +284,20 @@
       transition: max-height 1700ms;
     }
 
+    .card.hover-grow {
+      margin-block: 8px;
+      border: 1px solid hsl(0deg 0% 70%);
+      border-radius: 12px;
+      will-change: transform;
+      transition: scale 400ms;
+    }
+
+    .card.hover-grow:hover,
+    .card.hover-grow:focus-within {
+      scale: 105%;
+      transition: scale 200ms;
+    }
+
     /* Button hovers */
 
     button {
@@ -524,6 +538,11 @@
           <p>This card's detail will rise from the bottom when the card is hovered or focused.</p>
         </div>
       </div>
+
+      <div class="card hover-grow">
+        <h2>Grow on hover</h2>
+        <p>This card will grow larger when the card is hovered or focused.</p>
+      </div>
     </section>
 
     <section>
-- 
2.47.3