{"id":8857,"date":"2026-03-19T10:24:50","date_gmt":"2026-03-19T15:24:50","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=8857"},"modified":"2026-03-19T10:24:51","modified_gmt":"2026-03-19T15:24:51","slug":"image-gallery-with-popovers-and-aim-anchor-interpolated-morph","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/image-gallery-with-popovers-and-aim-anchor-interpolated-morph\/","title":{"rendered":"Image Gallery with Popovers and AIM (Anchor-Interpolated Morph)"},"content":{"rendered":"\n

While I was learning about Adam’s AIM technique<\/a> the other day, it occurred to me that a cool use case would be a photo gallery<\/strong>. See what AIM (Anchor-Interpolated Morph) can do is animate the entrance and exit of elements from other elements.<\/em> As in, use those other elements as literal CSS anchors.<\/p>\n\n\n\n

In this case, the “thumbnails” in a photo gallery could be the anchors, and we’d animate in the larger versions of those photos from<\/em> those thumbnail anchors. And back out to them too. <\/p>\n\n\n\n

It’s a kind of animation that not only looks cool, but is literally helpful, reminding you where an element came from and where it went. Imagine you’re proofing some images from a magazine photo shoot one by one, it would be a helpful reminder as you’re clicking through them which one you just looked at. <\/p>\n\n\n\n

Here’s the demo:<\/p>\n\n\n\n