JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid3x3">
 <div><img src="http://placekitten.com/200/300"></div>
 <div><img src="http://placekitten.com/240/300"></div>
 <div><img src="http://placekitten.com/400/300"></div>
 <div><img src="http://placekitten.com/280/300"></div>
 <div><img src="http://placekitten.com/210/140"></div>
 <div><img src="http://placekitten.com/240/200"></div>
 <div><img src="http://placekitten.com/50/50"></div>
 <div><img src="http://placekitten.com/200/100"></div>
 <div><img src="http://placekitten.com/700/300"></div>
</div>

CSS

.grid3x3{
 width:600px;
 height:600px;
 clear:both;
 border-radius:8px;
 box-shadow:inset 2px 4px 8px 0 hsla(0,0%,0%,.2);
}
.grid3x3>div{
 width:200px;
 height:200px;
 float:left;
 line-height:200px;
 text-align:center;
 
}
.grid3x3>div>img{
 display:inline-block;
 vertical-align:middle;
 max-width:70%;
 max-height:70%;
 border-radius:4px;
 box-shadow:2px 4px 8px 0 hsla(0,0%,0%,.2);
 -webkit-transition:-webkit-transform 700ms ease;
}
.grid3x3>div>img:hover{
 -webkit-transform:scale(1.1);
}

JavaScript

function init(){
 var grid=document.getElementsByClassName('grid3x3')[0];
 grid.onclick=function(e){
  if(e.target.nodeName=='IMG'){
   alert(e.target.src);
  }
 }
 window.removeEventListener('load',init,false);
}
window.addEventListener('load',init,false);