Add a counter label for each box

Without a counter, the order of the boxes is ambiguous when there are multiple rows.

diff --git a/index.html b/index.html
index fa8be0b366c2edff2923059958b9d07bf9169a5c..dc0b7e15074b44f40bc6360324f9bc3a60516ccc 100644 (file)
--- a/index.html
+++ b/index.html
@@ -51,12 +51,28 @@
         transition: filter 800ms;
         --index-order: 1;
         z-index: calc(var(--index-order) * var(--i));
+        counter-increment: n;
+        position: relative;
       }
 
       :host(:hover),
       :host(:focus-within) {
         filter: drop-shadow(0 0 4px hsl(222deg 50% 50%));
         transition: filter 400ms;
+
+        &::before {
+          opacity: 1;
+          transition: opacity 200ms;
+        }
+      }
+
+      :host::before {
+        content: counter(n);
+        position: absolute;
+        left: 6px;
+        top: 2px;
+        opacity: 0.6;
+        transition: opacity 400ms;
       }
 
       ::slotted(*) {