An image gallery is a nice example of AIM, where the larger version of an image can

Frontend Masters is an online learning platform offering  courses on frontend development technologies such as JavaScript, HTML, CSS, React, and Vue.js. Readers can learn about advanced frontend concepts, best practices, and modern development workflows from industry experts. With video lectures, exercises, and real-world projects, Frontend Masters provides  guidance and expertise for mastering frontend development skills.

Frontend Masters

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.

Image Gallery with Popovers and AIM (Anchor-Interpolated Morph) – Frontend Masters Blog

HTML and CSS Setup (No JavaScript by Default)