diff --git a/lib/custom_html.typ b/lib/custom_html.typ
index 82b9475..6ae24c1 100644
--- a/lib/custom_html.typ
+++ b/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")
diff --git a/lib/figures.typ b/lib/figures.typ
index 376cc87..d09d234 100644
--- a/lib/figures.typ
+++ b/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(