CSS Mini Music Player

by lovromar

HTML

<div class="player">
    <div class="details">
        <div class="track">
            <p class="title"><strong>Animus Vox</strong> by The Glitch Mob</p>
        </div>
    </div>
    <div class="bottom">
        <div class="playback">
            <div class="progress" data-time="2.33"></div>
        </div>
        <div class="controls">
            <div><img src="http://png-3.findicons.com/files//icons/2337/wireframe_toolbar_icons/16/playback_prev.png" alt="previous"/></div>
            <div><img src="http://png-1.findicons.com/files//icons/2337/wireframe_toolbar_icons/16/playback_play.png" alt="play"/></div>
            <div><img src="http://png-1.findicons.com/files//icons/2337/wireframe_toolbar_icons/16/playback_next.png" alt="next"/></div>
        </div>
    </div>
</div>

CSS

body {
    background-image: url('http://adamwhitcroft.com/wp-content/themes/Fifth/img/dot.png'),
                    url('http://1.bp.blogspot.com/-LB4xHO2c7yw/TeUdZqHuvyI/AAAAAAAAAEE/YJjPE8_5CG4/s1600/blurry_20030715.jpg');
    background-size: auto, cover;
}
.player {
    background: url('http://www.507projex.com/storage/1274690205_1drinkthesea.jpeg?__SQUARESPACE_CACHEVERSION=1282165707604');
    background-size: cover;
    border: 1px solid #111;
    border-radius: 5px;
    box-shadow: inset 0 0 1px 1px hsla(0,0%,100%,.1),
                0 2px 8px hsla(0,0%,0%,.4);
    left: 50%;
    margin: -113px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    width: 226px;
}
.player .details {
    height: 136px;
    position: relative;
}
.player .details .track {
    background:  hsla(0,0%,0%,.75);
    border-top: 1px sold hsla(0,0%,0%,.9);
    bottom: -96px;
    box-shadow: 0 -1px 1px hsla(0,0%,100%,.1);
    position: absolute;
    width: 100%;
    -webkit-transition: .4s;
       -moz-transition: .4s;
        -ms-transition: .4s;
         -o-transition: .4s;
            transition: .4s;
}
.player:hover .details .track {
    bottom: 0;
}
.player .details .track .title {
    color: #fff;
    font: 14px/24px 'Gill Sans MT', sans-serif;
    padding: 6px 12px;
}
.player .details .track .title strong {
    font-weight: bold;
}
.player .bottom {
    background-color: hsla(0,0%,25%,1);
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    border-top: 1px solid #111;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.1);
    padding: 12px;
    position: relative;
    top: 96px;
   ...