JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<img src="https://upload.wikimedia.org/wikipedia/commons/0/00/00_582_%C2%BBAm_Vorwerk%C2%AB%2C_ET_2167.jpg"/>
<img src="https://placehold.it/998x999.png"/>
<img src="https://placehold.it/997x999.png"/>
<img src="https://placehold.it/996x999.png"/>
<img src="https://placehold.it/995x999.png"/>
<img src="https://placehold.it/994x999.png"/>
<img src="https://placehold.it/993x999.png"/>
<img src="https://placehold.it/992x999.png"/>
<img src="https://placehold.it/991x999.png"/>
<img src="https://placehold.it/990x999.png"/>
<img src="https://placehold.it/999x991.png"/>
<img src="https://placehold.it/999x992.png"/>
<img src="https://placehold.it/999x993.png"/>
<img src="https://placehold.it/999x994.png"/>

CSS

img {
  display: inline-block;
  width: 600px;
  height: 450px;
  border: 1px solid black;
  border-radius: 5px;
}

.imgContainer {
  background: #000;
}

JavaScript

var imgList = document.getElementsByTagName('img');

for (var i = 0, i < imgList.length, i++) {
  imgList[i].style.visibility = "hidden";
	imgList[i].insertAdjacentHTML('beforebegin', '<div class="imgContainer">');
	imgList[i].insertAdjacentHTML('afterend', '</div>');
  imgList[i].onload = function(){imgList[i].style.visibility = "visible";};
}