Максим Ученик,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.inset{
display: inline-block;
box-shadow: 0 0 20px 20px #fff inset;
background-size: 100% 100%;
will-change: transform;
transform: scale(0);
}
.inset.big{
animation: big 1s forwards;
animation-delay: var(--pp, 300ms);
}
img{
visibility: hidden;
}
@keyframes big { to { transform: scale(1); } }
</style>
<script>
document.addEventListener( "DOMContentLoaded", function() {
const replace = (img, i) => {
const div = document.createElement("div");
div.className = "inset";
const opt = {
backgroundImage: `url(${img.getAttribute("src")})`,
width: `${img.width}px`,
height: `${img.height}px`
}
Object.assign(div.style, opt);
div.style.setProperty("--pp", `${i * 800}ms`)
img.parentNode.replaceChild(div, img);
div.classList.add("big");
};
document.querySelectorAll("img").forEach((img,i) => {
img.complete ? replace(img, i) : (img.onload = _=> replace(img, i));
}
)
});
</script>
</head>
<body>
<img src="https://razvod.guru/wp-content/uploads/2016/04/elitefon.ru-39315-300x200.jpg" alt="">
<img src="https://www.cdsblago.ru/images/xcds23033.jpg.pagespeed.ic.iK0165vbVg.jpg" alt="">
<img src="https://myintelligentkids.com/images/article/2bf7c35c8af068b43130f66b84e2adf68f81de6f.jpeg" alt="">
</body>
</html>