A walkthrough of building a JavaScript-free image gallery using the browser Popover API combined with AIM (Anchor-Interpolated Morph), a CSS technique that animates elements from the coordinates of a CSS anchor element. The tutorial covers the three animation states (entry, open, exit) using @starting-style, :popover-open, and :not(:popover-open), explains transition-behavior: allow-discrete for animating display changes, and shows how anchor() and anchor-size() functions drive the morph effect from thumbnail to full image and back.
Sort: