Jona Jona - 3 years ago 174
CSS Question

CSS Transition Width From Center

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, but since I'm an idiot I can't get it to work for my situation. Also, 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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download