<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.