JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#"><img src="http://7699298.betasimple.net/cinematheque/_test/3-1.jpg" alt="" /></a></li>
    <li><a href="#"><img src="http://7699298.betasimple.net/cinematheque/_test/13-1.jpg" alt="" /></a></li>
    <li><a href="#"><img src="http://7699298.betasimple.net/cinematheque/_test/10-1.jpg" alt="" /></a></li>
</ul>

CSS

ul {
    list-style-type: none;
    margin: 12px;
    padding: 0;
    border: 1px solid red;
    display:inline-block;
        
}

li {
    float: left; 
    width: 100px; 
    height: 100px; 
    line-height: 100px;
    margin: 0;
    text-align: center;
    display:inline-block;
    position: relative;
    overflow:hidden;


}
li + li{
    border-left: 1px solid red;

}
li img {
    vertical-align: middle;
    border: solid 2px grey;
    /* margin-top: -4px; */}

   ul li img:hover { zoom:3;
    z-index:+3000;
overflow: visible;}