<!--- This may need to change --->
<div class="main-container">
  <div class="coverflow-container">
    <ol class="coverflow-list">
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-1">
      <li class="coverflow-item">
        <label for="cover-1">
          <figure class="album-cover">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/51psxBugNkL.jpg">
            <figcaption class="album-name">Love Is Blind</figcaption>
          </figure>
        </label>
      </li>
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-2">
      <li class="coverflow-item">
        <label for="cover-2">
          <figure class="album-cover">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/9c0075e42d1e099c487488a168db0e41.1000x1000x1.jpg" />
            <figcaption class="album-name">Disintegration</figcaption>
          </figure>
        </label>
      </li>
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-3">
      <li class="coverflow-item">
        <label for="cover-3">
          <figure class="album-cover">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/3651470.jpg">
            <figcaption class="album-name">Dream Harder</figcaption>
          </figure>
        </label>
      </li>
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-4">
      <li class="coverflow-item">
        <label for="cover-4">
          <figure class="album-cover">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/MI0000681618.jpg">
            <figcaption class="album-name">Wish</figcaption>
          </figure>
        </label>
      </li>
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-5">
      <li class="coverflow-item">
        <label for="cover-5">
          <figure class="album-cover">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/homepage_large.63d675da.jpg">
            <figcaption class="album-name">2:54</figcaption>
          </figure>
      	</label>
      </li>
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-6">
      <li class="coverflow-item">
        <label for="cover-6">
          <figure class="album-cover">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/garbagealbum1.jpg">
            <figcaption class="album-name">Garbage</figcaption>
          </figure>
        </label>
      </li>
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-7">
      <li class="coverflow-item">
        <label for="cover-7">
          <figure class="album-cover">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/long-way-round-2010.png">
            <figcaption class="album-name">Long Way Round</figcaption>
          </figure>
        </label>
      </li>
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-8">
      <li class="coverflow-item">
        <label for="cover-8">
          <figure class="album-cover">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/61b3DwIVKqL.jpg">
            <figcaption class="album-name">HomeGrown</figcaption>
          </figure>
        </label>
      </li>
    	<!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-9">
      <li class="coverflow-item">
        <label for="cover-9">
          <figure class="album-cover">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/0000037627_500.jpg">
            <figcaption class="album-name">Casanova</figcaption>
          </figure>
        </label>
      </li>
    </ol>
  </div>
  <div class="controls">
      <label for="cover-1">1</label>
      <label for="cover-2">2</label>
      <label for="cover-3">3</label>
      <label for="cover-4">4</label>
      <label for="cover-5">5</label>
      <label for="cover-6">6</label>
      <label for="cover-7">7</label>
      <label for="cover-8">8</label>
    	<label for="cover-9">9</label>
    </div>
</div>
@transition-time:0.4s;

html,body {
  background:#212121;
  font-family:Helvetica, sans-serif;
  font-size:12px;
}

.main-container {
  margin:4em auto 0 auto;
  width:650px;
  .controls {
    margin:0 auto;
    padding:2em 0 0 0;
    text-align:center;
  }
}

.coverflow-container {
  box-reflect:below 0px -webkit-linear-gradient(top, rgba(0,0,0,0) 60%,rgba(0,0,0,0.1) 100%);
}

label {
	color:#999;
  display:inline-block;
  padding:10px;
  border:1px solid black;
  cursor:pointer;
  background:#252525;
  text-shadow:1px 1px 2px rgba(0,0,0,0.9);
  &:hover {
    color:#FFF;
  }
}

.coverflow-list {
  width:100%;
  .coverflow-item {
    display:inline-block;
    background:#414141;
    margin:0 -50px;
    position:relative;
    box-shadow:0 1px 8px rgba(0,0,0,0.9);
    .album-cover {
      display:block;
      height:150px;
      margin:0;
      img {
        height:150px;
        width:150px;
        opacity:0.5;
      }
    }
    .album-name {
      text-align:center;
      display:block;
      color:#444;
    }
    label {
    	padding:0;
      border:none;
      display:block;
      text-shadow:none;
    }
  }
}
/* Now apply 3D transforms (never done this before!) */
.coverflow-list {
	-webkit-transform: perspective(900px);
  -webkit-transform-style: preserve-3d;
  -webkit-perspective-origin: 100% 30%;
  .coverflow-item {
    -webkit-transition: all @transition-time ease;
    background:#212121;
    -webkit-transform: rotateY(45deg);
  }
}

input[type="radio"] {
  display:none;
  &:checked {
    + .coverflow-item {
      -webkit-transform: rotateY( 0deg );
      margin:0 auto;
      background:#313131;
      transition:all @transition-time ease;
      img { opacity:1; }
      figcaption { color:#FFFFFF; }
      ~ .coverflow-item {
      	-webkit-transform:rotateY(-45deg);
        background:#515151;
      }
    }
  }
}

/*@keyframes cover-forward {
  0% { transform: rotateY( 45deg ); }
  50% { transform: rotateY( 0deg ) translate3d( 60px,0,0 ) scale3d(1.2,1.2,1.2); z-index:999; }
  100% { transform: rotateY( 45deg ) translate3d( 0,0,0 ) scale3d(1,1,1); }
}

@keyframes cover-return {
  0% { transform: rotateY( 45deg ); }
  100% { transform: rotateY( 0deg ) translate3d( 150px,0,0 ) scale3d(1.2,1.2,1.2); }
}*/
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.