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(