JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
 <ul class="gallery">
 <li><img src="1.jpg" /> </li>
 <li><img src="2.jpg" /> </li>
 <li><img src="3.jpg" /> </li>
 <li><img src="4.jpg" /> </li>
 </ul>
</div>

CSS

body{ background-color:#CCC;}
#main{top:50%; left:50%; height:300px; width:910px;}
ul.gallery{list-style: none; margin:200px 100px;}
ul.gallery li{float: left; position: relative; width: 110px; height: 110px;}
ul.gallery li img{height:70px; width:70px; padding:5px; border: 1px solid #ddd;       background: #f0f0f0; position: absolute; cursor:pointer;}

JavaScript

$(function()
 {
  $('ul.gallery li img').hover(function()
  {
   $(this).css({'z-index' : '10'});
   $(this).animate({
   marginTop: '-110px',
   marginLeft: '-110px',
   top: '50%',
   left: '50%',
   width: '174px',
   height: '174px',
   padding: '10px'
  }, 500);
 } , function() {
 $(this).css({'z-index' : '0'});
 $(this).animate({
 marginTop: '0',
 marginLeft: '0',
 top: '0',
 left: '0',
 width: '70px',
 height: '70px',
 padding: '5px'
 }, 400);
 });
 });