JSFiddle - React, Tailwind, and code Playground

HTML

<body style="text-align:center;margin-top:360px">
  
<div style="display:inline-block"  class="zoom" ><img src="http://www.dizzyner.com/temp/zoom/1.png"/></div>
<div style="display:inline-block"  class="zoom" ><img src="http://www.dizzyner.com/temp/zoom/2.png"/></div>
    <div style="display:inline-block"  class="zoom" ><img src="http://www.dizzyner.com/temp/zoom/3.png"/></div><br/>
    <div style="display:inline-block"  class="zoom" ><img src="http://www.dizzyner.com/temp/zoom/4.png"/></div>
    <div style="display:inline-block"  class="zoom" ><img src="http://www.dizzyner.com/temp/zoom/5.png"/></div>
    <div style="display:inline-block"  class="zoom" ><img src="http://www.dizzyner.com/temp/zoom/6.png"/></div><br/>
    <div style="display:inline-block"  class="zoom" ><img src="http://www.dizzyner.com/temp/zoom/7.png"/></div>
    <div style="display:inline-block"  class="zoom" ><img src="http://www.dizzyner.com/temp/zoom/8.png"/></div>
    <div style="display:inline-block"  class="zoom" ><img src="http://www.dizzyner.com/temp/zoom/9.png"/></div>
</body>

CSS

/*.zoom {
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
   
width:80px;
        height:40px
}
.zoom:hover {
  -webkit-transform: scale(2.5);
          transform: scale(2.5);
}*/

div {-webkit-transform: scale(1.2);
          transform: scale(1.2);
margin:20px 30px; border:1px #bfd1db solid; padding:0 5px}
div:hover{border:1px #3d6aa2 solid; }
body { background:url(http://www.dizzyner.com/temp/zoom/back.png)}