JSFiddle - React, Tailwind, and code Playground

by kdani3

HTML

<ul class="slider">
    <li>
        <img src="http://farm8.staticflickr.com/7252/7844624116_e83df243a5_z.jpg" />
    </li>
  
    <li>
        <img src="http://farm6.staticflickr.com/5250/5239014836_02721ca371_z.jpg" />
    </li>
    
    <li>
        <img src="http://farm6.staticflickr.com/5087/5238981736_2eeae58ece_z.jpg" />
    </li>
</ul>

CSS

ul.slider
{
    display: inline;
}

ul.slider li
{
    width: 7em;
    float: left;
    -webkit-transition: all .5s;
	-moz-transition: all 5s;
    transition: all .5s;
    -webkit-transform: rotateY(20deg) rotateX(20deg) scale(.6,.6);
    -moz-transform: rotateY(20deg) rotateX(20deg) scale(.6,.6);
    transform: rotateY(20deg) rotateX(20deg) scale(.6,.6);
}

ul.slider li img
{
    width: 15em;
    height: auto;
    border: 5px solid white;
        -webkit-box-shadow: 0px 0px 65px 2px rgba(0, 0, 0, .5);
box-shadow: 0px 0px 65px 2px rgba(0, 0, 0, .5);
}

ul.slider:hover li
{
    width: 3em;
}

ul.slider li:hover
{
    width: 15em;
    margin:1em;
    margin-left:7em;
    z-index: 100;
     -webkit-transform: none;
    -moz-transform: none;
    transform: none;
}

ul.slider li:hover:first-child
{
    margin-left: 1em;
}