CSS Transition Width From Center

Question

Okay, so I want my container to open up from the center to the specified width when on hover of the parent.

The problem is that I can't get it to not open up from the left. I want it to work similarly to this situation here.

If possible, I'd like the animation for the corners of the container to activate after it has done it's first animation.

body {
  background: #4e4e4e;
}

#music {
  position: absolute;
  top: 5px;
  left: calc(50% - 50px);
  width: 50px;
  height: 50px;
  border: 1px solid white;
  background-color: #000;
  opacity: 1;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

#music:hover {
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
}

#music img {
  height: 30px;
  width: 30px;
  margin-top: 10px;
}

#music:hover .music-container {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  height: 23px;
  width: 210px;
  margin-top: 8px;
  opacity: 1;
  background-color: #000;
  color: #000;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

.music-container {
  height: 23px;
  width: 0px;
  position: absolute;
  background-color: #000;
  padding-left: 10px;
  border: 1px solid white;
  margin-left: -85px;
  margin-top: 8px;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

<div id="music">
  <center>
    <img src="https://i.imgur.com/cgIfJId.gif" />
  </center>
  <div class="music-container">
    <center>
      <font color="white" size="1">
        jsfiddle can't load my music lol
      </font>
    </center>
  </div>
</div>

Answer 1

You need to use transform property over-here to increase width from center for .music-container,

body {
  background: #4e4e4e;
}

#music {
  position: absolute;
  top: 5px;
  left: calc(50% - 50px);
  width: 50px;
  height: 50px;
  border: 1px solid white;
  background-color: #000;
  opacity: 1;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

#music:hover {
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
}

#music img {
  height: 30px;
  width: 30px;
  margin-top: 10px;
}

#music:hover .music-container {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  height: 23px;
  width: 210px;
  margin-top: 8px;
  opacity: 1;
  background-color: #000;
  color: #000;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

.music-container {
  height: 23px;
  width: 0px;
  position: absolute;
  background-color: #000;
  padding-left: 10px;
  border: 1px solid white;
  margin-top: 8px;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  left: 50%; /*Add this*/
  transform: translate(-50%, 0); /*Add this*/
}

<div id="music">
  <center>
    <img src="https://i.imgur.com/cgIfJId.gif" />
  </center>
  <div class="music-container">
    <center>
      <font color="white" size="1">
        jsfiddle can't load my music lol
      </font>
    </center>
  </div>
</div>