<div class="stack">
  
  <div class="playlist">
    <div class="songs">
      <a href="#">
      <img src="https://source.unsplash.com/200x200/?music" class="ccw"/>
      <img src="https://source.unsplash.com/200x200/?music,venue" class="cw"/>
      <img src="https://source.unsplash.com/200x200/?hip-hop" />
      </a>
    </div>
    <h3><a href="#">Hip Hop</a></h3>
  </div>
  <div class="playlist">
    <div class="songs">
      <a href="#">
      <img src="https://source.unsplash.com/200x200/?guitar" class="ccw"/>
      <img src="https://source.unsplash.com/200x200/?drums" class="cw"/>
      <img src="https://source.unsplash.com/200x200/?guitars" />
      </a>
    </div>
    <h3><a href="#">Rock</a></h3>
  </div>
  <div class="playlist">
    <div class="songs">
      <a href="#">
      <img src="https://source.unsplash.com/200x200/?gym" class="ccw"/>
      <img src="https://source.unsplash.com/200x200/?fitness" class="cw"/>
      <img src="https://source.unsplash.com/200x200/?treadmill" />
      </a>
    </div>
    <h3><a href="#">Gym</a></h3>
  </div>  
</div>

body {
 padding:20px 0; 
 background: url('http://s15.postimage.org/veanrmv0r/purty_wood_3.png');
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 font-weight: 300;
}
.stack {
  width:90%;
  margin: 0 auto;
  
  .playlist {
    width:33%;
    //height:170px;
    text-align:center;
    float:left;
  }
  
  .songs {
    position:relative;
    width:170px;
    height:170px;
    margin:20px auto;
  }
  
  h3 a {
    background: #222;
    color: #eee;
    display:inline-block;
    padding:3px 10px;
    border-radius: 10px;
    font-size:0.8em;
    text-decoration:none;
    
    &:hover {
     color:#222;
     background:#eee;
     transition: all 0.2s;
    }
  }
  
  img {
   display:block;
   position:absolute;
   top:0; left:0;
   width:150px;
   height:150px;
   padding:10px;
   background:white;
   border-radius:6px;
   border:1px solid rgba(255,255,255,0.9);
   box-shadow: 0 0 2px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.1) inset;
    -webkit-backface-visibility: hidden;
    
    &.cw {
     transform: rotate(5deg); 
    }
    
    &.ccw {
     transform: rotate(-5deg); 
    }
  }
}

$(function()
  {
    var loopInterval;
    
    function Reorder(container)
    {
       $("img", container).last().prependTo(container);
    }
    
    $('.songs a').hover(function()
                        {
                          var container = this;
                          Reorder(container)
                          loopInterval = setInterval(function(){Reorder(container);}, 400);
                        },
                         function()
                         {
                           clearInterval(loopInterval); 
                         });
  });