Playing and Pausing Images « dgrebb.com

A quick example to demonstrate the use of `details` and `summary` to play/pause animated images.

by dgrebb

HTML

<figure class="animated-image">
  <div class="animation-player">
    <img
      src="https://imgtr.ee/images/2023/10/21/34cdee1935e9677e0defa5ae50ad73a4.jpeg"
      alt="Still frame of motion sickness"
      loading="lazy"
    />
    <details>
      <summary aria-label="Click to play the animation">
        Play/Pause
      </summary>
      <div class="animation">
        <img
          src="https://media4.giphy.com/media/WS0I3awIzkDWQyClKF/giphy.gif"
          alt="Animated {altText}}"
          loading="lazy"
        />
      </div>
    </details>
  </div>
  <figcaption>Buckets of fun!</figcaption>
</figure>

CSS

@media (prefers-color-scheme: light) {
  body {
    color: black;
    background-color: white;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background-color: black;
  }
}


.animated-image {
  position: relative;
}

.animation-player>img {
  z-index: 1;
}

.animated-image summary {
  z-index: 2;
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: .5rem 1rem;
  border-radius: 1rem;
  cursor: pointer;
}

.animation img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}