music player

#music{ position:absolute;height: 65px;width: 65px;top:2%;left:2%; margin: auto; z-index:99;}
#music1{ position:absolute; padding:2px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
#music1:hover #music2{ opacity:0; margin-top:-25px; z-index:-1;}
#music1:hover #music3{ opacity:0.7; margin-top:0px; z-index:99;}
#music1:hover #musiclist{ opacity:1;}
#music2{ opacity:1; background-color:#; padding:6px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
#music3{ opacity:0; position:absolute; background-color:#; background-image: url('http://assets.clickmotive.com/Designs/LEMidnight/playButton.png%27); background-repeat: no-repeat; background-size: 35px; border:1px dotted #; width:35px; height:35px; z-index:99 margin-left:0px; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}



<div id="music">
<div id="music1">
<div id="music2">
<img src="http://68.media.tumblr.com/tumblr_m7w0r6EVzZ1r6o8v2.gif" style="opacity: 0.8;"></div>
<div id="music3">
<Div style="margin-top:4px;">
<audio controls loop style="opacity: 0;"><source src="https://puu.sh/ywhdR/cceb1688b8.mp3%22%3E</audio>
</div>
</div>