JSFiddle - React, Tailwind, and code Playground

by Claudius

HTML

<ul class="tearsheets">
  <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
    <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
      <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
        <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
          <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
            <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
              <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
                <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
                  <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
                    <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
                      <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
                        <li><a href="#"><span><img class="galleryImg" src="http://lorempixum.com/200/200/transport"></span></a></li>
          
     </ul>

CSS

ul.tearsheets{
		overflow:hidden;
		clear:both;
		max-width:100%;
		position:relative;
	}
	.tearsheets li span {
	   display:inline-block;
	   vertical-align:middle;
	   height:110px;
	   
	}
	.tearsheets{
		padding:18px 18px 108px 18px;
	}
	.tearsheets li{
		float:left;
		line-height:110px;
		width:160px;
		list-style:none;
		height:110px;
		background-color:#9C9B9B;
		text-align:center;
		position:relative;
		margin:0 1px 1px 0;
		-moz-transition: all 0.25s ease;
    	-webkit-transition: all 0.25s ease;
	}
	.tearsheets li a{
		display:block;
		
	}
	.tearsheets li span img{
		padding-top:10px;
		z-index: 0;
		max-height:90px;
		-moz-transition: all 0.25s ease;
   		-webkit-transition: all 0.25s ease;
	}
	.tearsheets li a:hover{
		height:221px;
		background-color:#9C9B9B;
		width:321px;
		position:absolute;
		z-index:1000000;
	}
	.tearsheets li a:hover span{
		padding-top:10px;
		
	}
	.tearsheets li a:hover span img{
		max-height:180px;
	}