Learn how to pause and play GIFs using this nifty CSS-only solution from Christian Heilmann — more of an illusion, but does the job.
Christian Heilmann shares a quick experiment in pure CSS on how to cover a GIF with a play button instead of playing it.
Looking for a more robust solution, check out the freezeframe.js library to ensure accessibility requirements are following, try this HTML solution.
👋 Howdy! My name is Ben Marshall & I’ve been developing websites for over 20 years. I specialize in WordPress development, SEO strategy & LOVE what I do. Familiar with CSS-Tricks? … you should be, my site’s design was heavily inspired by it — hope you like it.
I build websites for both small mom & pop shops to large Fortune 500 companies. In addition to freelance work, I also have a full-time position at the New York-based Entermedia agency. Need a site, help with an existing one or a boost in search engines? I’m your guy, contact me today!
Are you a non-profit or organization helping the community and in need of a site? I offer heavily discounted services — sometimes free — to worthy causes.
All comments posted on 'Pause & Play GIFs with CSS' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.
You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.
Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.