From: Ardis Lu <ardisglu@gmail.com>
Date: Sat, 31 Aug 2024 21:50:59 +0000 (-0700)
Subject: Fix SVG drop-shadow transition out
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=df503c4164619143d1473fd8366c050603ce8261;p=css-for-line-clamp-ellipsis

Fix SVG drop-shadow transition out

Need to duplicate transition: filter to pre:hover selector since it has higher specificity than svg
---

diff --git a/index.html b/index.html
index a5ead3c..dee623d 100644
--- a/index.html
+++ b/index.html
@@ -110,17 +110,17 @@
       display: block;
       pointer-events: none;
       opacity: 0.5;
-      transition: opacity 400ms;
+      transition: opacity 400ms, filter 400ms;
     }
 
     :is(pre:hover, pre:focus-within) svg {
-      transition: opacity 200ms;
+      transition: opacity 200ms, filter 400ms;
       opacity: 0.9;
     }
 
     :is(button:hover, button:focus-within) svg {
       filter: drop-shadow(0 0 16px hsl(216deg 50% 65%));
-      transition: filter 200ms;
+      transition: opacity 200ms, filter 200ms;
     }
 
     pre,