JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<ul class="albums">
    <li class="first"><img src="http://i.imgur.com/b36z7.jpg" /></li>
    <li class="second"><img src="http://i.imgur.com/b36z7.jpg" /></li>
    <li class="third"><img src="http://i.imgur.com/b36z7.jpg" /></li>
    <li class="fourth"><img src="http://i.imgur.com/b36z7.jpg" /></li>
    <li class="fifth"><img src="http://i.imgur.com/b36z7.jpg" /></li>
    <li class="current"><img src="http://i.imgur.com/b36z7.jpg" /></li>
</ul>

CSS

body { margin: 10px; font: 14px/20px Helvetica Neue, sans-serif; }
.albums { list-style: none; margin: 0; position: relative; height: 280px; background: url(http://i.imgur.com/qmzUM.jpg) no-repeat; padding: 60px 25px 0; width: 630px; overflow: hidden; }
.albums li { display: inline-block; width: 120px; height: 120px; margin-right: -95px; box-sizing: border-box; box-shadow: rgba(0,0,0,0.5) 0 0 5px; text-align: center; -webkit-transform:  perspective(500px) rotateY(30deg); -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255,255,255,0.5))); position: relative; -webkit-transition: all 0.25s; }
.albums li img { display: block; width: 100%; height: 100%; }
.albums li.first { width: 120px; height: 120px; line-height: 120px; top: -40px; }
.albums li.second { width: 130px; height: 130px; line-height: 130px; top: -35px; }
.albums li.third { width: 140px; height: 140px; line-height: 140px; top: -30px; }
.albums li.fourth { width: 150px; height: 150px; line-height: 150px; top: -25px; }
.albums li.fifth { width: 160px; height: 160px; line-height: 160px; top: -20px; }
.albums li.current { width: 200px; height: 200px; line-height: 200px; -webkit-transform: rotateY(0deg); z-index: 10; top: 0; }
/*.albums li:hover { width: 200px; height: 200px; line-height: 200px; -webkit-transform: rotateY(0deg); z-index: 100; top: 0; }*/