Click to Zoom (basic)
)
Why this interaction works
Long-form content often hides images at display sizes that are too small to read. Icons get cropped, diagrams become illegible, screenshots lose their fidelity. The click-zoom pattern keeps the reading flow compact while giving the reader an escape hatch the moment something deserves a closer look.
)
)
Both thumbnails are displayed at a 1:1 crop using object-fit: cover. The zoomed view preserves that crop; same visual content, just larger. And the browser automatically requests the larger srcset variant when the clone is rendered at zoom size.
The animation
Under the hood, the source <img> is cloned into the lightbox and positioned at the zoomed-out target rect. GSAP then computes an inverse transform that places it on top of the source, and animates it back to identity.
)
)