<div>
  <figure>
    <img class="ready" data-src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_01.jpg" src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_dummy.jpg" alt="">
  </figure>
  
  <figure>
    <img class="ready" data-src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_02.jpg" src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_dummy.jpg" alt="">
  </figure>
  
  <figure>
    <img class="ready" data-src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_03.jpg" src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/progressive-image_dummy.jpg" alt="">
  </figure>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://www.ameamelog.com/wp/wp-content/uploads/2019/10/tada.js"></script>
<script>
Tada.setup({
  delay: 500,
  callback: function(i_element){
    $(i_element).addClass("loaded");
  }
});
$(".ready").tada();
</script>
body {
  min-height: 100vh;
  margin: 0;
  padding: 10vh 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
figure {
  width: 400px;
  height: 250px;
}
figure:not(:last-of-type) {
  margin-bottom: 50vh;
}
img {
  vertical-align: middle;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.