JSFiddle - React, Tailwind, and code Playground

HTML

<div style="margin:0 auto; background:gray; width:80%;">
  <div class="Enlrg">
   <ul>
      <li><img class="myimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXIluN6juH8fgNacQ4bq4MmMDnvN6lpM_cCnaSIYYMeKom9I1LTg" alt="Rocasa Future classroom" /></li>
 <li><img class="myimg" src="http://static.comicvine.com/uploads/original/6/68345/2103653-superman_logo_012.png" alt="Rocasa Future classroom" /></li>
 <li><img class="myimg" src="http://sciencefiction.com/wp-content/uploads/2013/08/superman-batman.jpg" alt="Rocasa Future classroom" /></li>
   </ul>
  </div>
</div>

CSS

.myimg {
    position:relative;
    width:50%;
    top:0px;
}


.myimg:hover {
    width:80%;
    z-index:9999;
    margin-left: -15%;
    margin-top: -10%;
}


.Enlrg ul {clear:both; list-style-type:none; }


.Enlrg li {width:20%;
float: left;
overflow:visible;
display: block;
}