Aqua Music Player

/* I GO UNDER <STYLE TYPE="TEXT/CSS"> */
.melody {
background-color: rgba(255,255,255,0.7); /* CHANGE ALL THE "255"'S TO "0"'S TO MAKE ME DARK TRANSPARENT */
overflow: hidden;
position:absolute;
height: 50px;
width: 50px;
margin-top: 15px; /* ADJUST VALUE TO MOVE ME */
margin-left: 15px; /* ADJUST VALUE TO MOVE ME */ }

.reverberate {
position:absolute;
height: 14px;
width: 14px;
margin-top: 0px;
margin-left: 0px;
padding: 18px;
font-size: 13px;
font-style: normal;
color: {color:Music Note};
-webkit-transition: opacity .7s linear;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out; }

.melody:hover .reverberate {
margin-top: -50px; }

.harmony {
overflow: hidden;
position:absolute;
height: 50px;
width: 20px;
margin-top: 50px;
margin-left: 15px;
-webkit-transition: opacity .7s linear;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out; }

.melody:hover .harmony {
margin-top: 0px; }

.rhythm {
position:absolute;
height: 25px;
width: 30px;
margin-top: 12px;
margin-left: -20px; }
/* I GO UNDER <STYLE TYPE="TEXT/CSS"> */


<!--I GO UNDER <BODY>-->
<div class="melody">
<div class="reverberate">
<span class="fontawesome-music"></span>
</div><!--reverberate-->
<div class="harmony">
<div class="rhythm">
<!--INSERT YOU BILLY MUSIC PLAYER EMBED CODE HERE!!!!!-->
</div><!--rhythm-->
</div><!--harmony-->
</div><!--melody-->
<!--I GO UNDER <BODY>-->