A CodePen by Andrea Ferrato. CD Cover animations

index.html

<div class="contenitore">
<div class="poster safari">
    <div class="left"></div>
    <div class="right"></div>
    <div class="tracks">
    <h2>Safari</h2>
    <ul>
     <li>Fango – 4:34</li>
     <li>Mezzogiorno – 4:22</li>
     <li>A te – 4:25</li>
     <li>Dove ho visto te – 4:30</li>
     <li>In orbita – 4:33</li>
     <li>Safari – 4:25</li>
     <li>Temporale – 5:54</li>
     <li>Come musica – 3:50</li>
     <li>Innamorato – 2:38</li>
     <li>Punto – 4:11</li>
     <li>Antidolorificomagnifico – 4:26</li>
     <li>Mani libere 2008 – 4:25</li>
    </ul>
  </div>
</div>


<div class="poster ora">
    <div class="left"></div>
    <div class="right"></div>
    <div class="tracks">
    <h2>Ora</h2>
    <ul>
     <li>Megamix – 3:28</li>
     <li>Tutto l'amore che ho – 3:38</li>
     <li>Le tasche piene di sassi – 3:33</li>
     <li>Amami – 3:26</li>
      <li>Ora – 4:01</li>
     <li>Il più grande spettacolo dopo il Big Bang – 3:50</li>
     <li>L'elemento umano – 5:15</li>
     <li>La bella vita – 5:07</li>
     <li>Battiti di ali di farfalla – 4:01</li>
     <li>Io danzo – 4:31</li>
     <li>La notte dei desideri – 3:27</li>
     <li>Quando sarò vecchio – 4:47</li>
     <li>Un'illusione – 3:12</li>
     <li>La porta è aperta – 3:43</li>
     <li>Rosso d'emozione – 4:34</li>
      <li><b>CD 2</b></li>
     <li>Spingo il tempo al massimo – 3:39</li>
     <li>I pesci grossi – 4:44</li>
     <li>Kebrillah – 3:43</li>
     <li>La festa infinita – 4:12</li>
     <li>Sulla frontiera – 3:37</li>
     <li>Dabadabadance – 3:35</li>
     <li>La medicina – 3:48</li>
     <li>Sul lungomare del mondo – 2:47</li>
     <li>Go!!!!!!! – 3:22</li>
     <li>L'elemento umano (Acoustic Version) – 3:58</li>
    </ul>
  </div>
</div>
</div>

script.js

/*
  you have a Dribbble invite? 
    Feel free to contact me!! :)
      ferra.andre@gmail.com
*/

style.css

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

body {
  background-image: url('http://subtlepatterns.com/patterns/wood_pattern.png');
  font-family: 'Lato';
}
.contenitore {
  width:1200px;
  margin: 0px auto;
}
.poster {
  position: relative;
  float:left;
  margin: 120px 90px;
  width: 400px;
  height: 400px;
  background: #fff;
  box-shadow: 0 0 0 15px #fff, 0px 0px 100px  #000;
  perspective: 2000;
}

.left {
  position: absolute;
  width:200px;
  height:400px;
  background-position:top left;
  background-size: 400px;
}

.right {
  position:absolute;
  right:0px;
  width:200px;
  height:400px;
  background-position:top right;
  background-size: 400px;
  transition: transform 1.0s 1s ease-in-out, box-shadow 1s 1s ease-in-out;
  transform-origin: left;
  transform-style: preserve-3d;
  
}

.safari .left {
   background-image: url('http://f.cl.ly/items/021J3B3P2l3j3O1F130j/Image%202012.09.17%2017:29:24.png');
}

.safari .right {
   background-image: url('http://f.cl.ly/items/021J3B3P2l3j3O1F130j/Image%202012.09.17%2017:29:24.png');
}

.ora .left {
   background-image: url('http://f.cl.ly/items/2N2n2B3a1A1I3K0u3C2I/Image%202012.09.17%2017:54:45.png');
}

.ora .right {
  background-image: url('http://f.cl.ly/items/2N2n2B3a1A1I3K0u3C2I/Image%202012.09.17%2017:54:45.png');

}

.tracks {
  position:relative;
  z-index:-100;
  float:right;
  width:300px;
  height:400px;
  background-image: url('http://subtlepatterns.com/patterns/handmadepaper.png');
  transition: all 1.0s 0s ease-in-out;
}

.tracks ul {
  float:right;
  height:320px;
  width:210px;
  overflow:auto;
  padding: 10px;
  color: #420101; 
  list-style-type:none;
  text-shadow: 0px 0px 1px #fff;
  font-family: 'Lato';
  font-size: 12px;
}

.tracks ul li {
  margin-bottom:8px; 
}

.tracks h2 {
  margin: 5px 20px 0;
  text-align:right;
  font-variant: small-caps;
  font-size: 30px;
  color: #420101; 
}

.poster:hover .right {
  box-shadow: 10px 10px 50px black, inset 0px 20px 100px -15px black
    ;
  transition: transform 1.0s 0s ease-in-out, box-shadow 1s 0s ease-in-out;
  transform: rotateY(-70deg);
}

.poster:hover .tracks {
  box-shadow: 5px 5px 40px rgba(0, 0, 0, .5);
  transition: all 1.0s 1s ease-in-out;
  transform: translateX(130px) rotate(5deg) translate3d( 0, 0, 0);
  transform-origin: left;
  transform-style: preserve-3d;
}