add alt text on hover for figure image

lib/custom_html.typ

@@ -23,3 +23,4 @@
   // Role 'radiogroup' is needed because of bug in chromium with screenreaders (https://lyra.horse/blog/2025/08/you-dont-need-js/#fn:10)
   html.elem("image-magnifier-group", attrs: (role: "radiogroup"), body)
 }
+#let image-alt-group = html.elem.with("image-alt-group")

lib/figures.typ

@@ -52,6 +52,31 @@
       pointer-events: none;
     }
 
+    image-alt-group {
+      position: relative;
+      display: inline-block;
+
+      .alt-text {
+        visibility: hidden;
+        opacity: 0;
+        background-color: var(--color-bg-overlay);
+        padding: 10px;
+        margin: 10px;
+        top: 0;
+        border-radius: 6px;
+        position: absolute;
+        z-index: 1;
+
+        transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
+      }
+
+      &:hover .alt-text {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity 250ms ease-in 1s, visibility 0ms ease-in 1s;
+      }
+    }
+
   }
   ```
   chtml.image-magnifier-group({
@@ -62,7 +87,10 @@
         id: "img-" + str(fs-id) + "-magnified-button", 
         class: ("img-magnified-button",)
       )
-      img
+      chtml.image-alt-group({
+        img
+        html.span(class: ("alt-text",), img.alt)
+      })
     })
     html.label({
       html.input(