JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <a href="#"><img src="http://animated.ucoz.com/_ph/84/2/483056889.jpg?1490548115"></a>
        <div class="clearfix"></div>

CSS

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    background: url("img/washi.png")  bisque;
}
.gallery{
    width: 90%;
    margin: 0 auto;
    border: 3px solid red;
    background-color: antiquewhite;
    
}

 .gallery a{
    display: block; 
    float:left;
    width:25%;
    height:100px;
    border:1px solid #333;
    box-sizing:border-box;
    position: relative;
    opacity:  
}
    .clearfix{
    clear: both;
}
    a img{
    display:block;
    width:100%;
    height:100%;
    transition-property:width, height;
    transition-duration:1s;
    position: absolute;
}

    a:focus img{
    width:250%;
    height:250%;
    z-index:1;
    box-shadow:0 0 15px 2px #000;
    position: absolute;    
}