Post #4249637

This won't format well on most hosts, sorry: ```html The Tower of Balal Artist's drawing depicting the building of the Tower of Balal. ``` ```css figure[popover] { /* popovers are hidden by default and appear above all other content, / make it visible again and re-insert the element into the document */ display: block; position: static; /* popovers have a border by default */ border: none; button { /* strip the "buttoness" from the button, show only the image */ margin: 0; padding: 0; border: none;} button > img { /* make the image automatically fill the width / of the side-bar or whatever element its within */ display: block; max-width: 100%; } } figure[popover]:popover-open { /* reinstate the floats-above-everything effect, this allows / the background page to scroll without losing the popover */ position: fixed; /* reinstate default popover attributes, / recenter the popover, fill screen */ width: fit-content; height: fit-content; margin: auto; button > img /* change auto-sizing to limit by screen-height instead of width! / this is so that a wide or tall image doesn't cause scrolling! / "vh" units are used so that the image is 80% of the screen / height, *not* the document height */ { max-width: auto; max-height: 80vh; } } ``` #cssmimap