Pause & Play GIFs with CSS

Shared by
Published
Updated
Find your next web developer job
Drupal Web Developer at On Fire Media (San Antonio, TX)

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.

Did you find Pause & Play GIFs with CSS useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on facebook

Stay updated.

Get a weekly email with the latest trends in web development & SEO.

Write a guest post.

Have an interesting article or idea? Become a guest blogger & pitch me your concept today.

Join the conversation.

Your email address will not be published. Required fields are marked *

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.