Pausing a GIF with details/summary

Steve Faulkner has a clever idea here. You can show an (animated) GIF and overlay a pause/play button on top of it which is really a <details>/<summary> element. When toggled, a (non-animated) JPG inside covers the GIF, effectively “pausing” it.

Adrian Roselli calls it a “quick and dirty” way to pass WCAG Success Criterion 2.2.2 Pause, Stop, Hide.

I forked it, swapped out all the images so it shows the JPG first, and put loading="lazy" on … Read article “Pausing a GIF with details/summary”

The post Pausing a GIF with details/summary appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.