<main>
  <h2>Freezeframe.js Demo Page</h2>

  <p>This page uses a library called <a href="https://github.com/ctrl-freaks/freezeframe.js/">Freezeframe.js</a> to enable playing/stopping of animated GIFs.</p>

  <div class="wrap">
    <figure>
      <img src="https://user-images.githubusercontent.com/558709/71785368-b2557400-2fcc-11ea-8c26-6e343ccc386a.gif" class="freezeframe1">
      <figcaption>No play button; plays on hover</figcaption>
    </figure>
    <figure>
      <img src="https://user-images.githubusercontent.com/558709/71785387-d9ac4100-2fcc-11ea-9999-f5b2bc755e19.gif" class="freezeframe2">
      <figcaption>Play button on click</figcaption>
    </figure>
    <figure>
      <img src="https://user-images.githubusercontent.com/558709/71785397-fcd6f080-2fcc-11ea-94a3-b198f91c760c.gif" class="freezeframe3">
      <figcaption>Play button on hover</figcaption>
    </figure>
  </div>
</main>

<!-- https://postmediawindsorstar2.files.wordpress.com/2015/10/bautista.gif -->

<!-- https://media1.tenor.com/images/1dd25d6d8b07d8f5649f446d7260dd3e/tenor.gif -->

<!-- http://www.rantchic.com/wp-content/uploads/2013/12/giphy1.gif -->

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
  line-height: 1.3;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

figure {
  max-width: 360px;
  margin: 0 0 20px;
}

figcaption {
  font-size: .8em;
  font-weight: bold;
  padding-top: 6px;
}

img {
  max-width: 100%;
  height: auto;
}

new Freezeframe('.freezeframe1', {
  trigger: 'hover',
  overlay: false
});

new Freezeframe('.freezeframe2', {
  trigger: 'click',
  overlay: true
});

new Freezeframe('.freezeframe3', {
  trigger: 'hover',
  overlay: true
});