Aqua Music Player (CSS)

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

.melody {
background-color: rgba(255,255,255,0.6); /* REPLACE THE FOUR "255" WITH "0" TO MAKE IT DARK INSTEAD OF LIGHT */
overflow: hidden;
position:absolute;
height: 50px;
width: 50px;
top: 15px; /* INCREASE VALUE TO MOVE DOWN AND DECREASE VALUE TO MOVE UP */
left: 15px; /* INCREASE VALUE TO MOVE RIGHT AND DECREASE VALUE TO MOVE LEFT */
}

.reverberate {
position:absolute;
height: 14px;
width: 14px;
margin-top: 0px;
margin-left: 0px;
padding: 18px;
font-size: 13px;
font-style: normal;
color: #000;
-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: 5px; }

.rhythm {
position:absolute;
height: 25px;
width: 30px;
margin-top: 12px;
margin-left: -20px; }