<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.