In this example on hover the inner div add width from the right.

I want to make it enlarge from the left inside, how to make that.

#outer{
  width: 50px;
  height: 50px;
  margin: auto;
}

#inner{
  height: 50px;
  width: 50px;
  background-color: red;
  transition: all .5s;
}

#inner:hover{
  width: 150px;
}

<div id="outer">
  <div id="inner"></div>
</div>

CodePudding user response：

adjust the margin-left instead of the width

#outer{
  width: 50px;
  height: 50px;
  margin: auto;
}

#inner{
  height: 50px;
  background-color: red;
  transition: all .5s;
}

#inner:hover{
  margin-left: -100px;
}

<div id="outer">
  <div id="inner"></div>
</div>

CodePudding user response：

You would have to "pin" the div in place, probably using position or margin and then change the width.

#inner {
  height: 50px;
  width: 50px;
  margin-left: auto;
  margin-right: calc(50vw - 25px);
  background-color: red;
  transition: width .5s;
}

#inner:hover {
  width: 150px;
}

<div id="outer">
  <div id="inner"></div>
</div>

CodePudding user response：

It depends a bit on exactly what effect the expansion is to have.

But assuming you do want the outer element to stay at 50px and the inner element just to expand but not affect surrounding elements, you could position it absolute and right: 0. The rest of the code can remain the same (i.e. change the width).

#outer {
  width: 50px;
  height: 50px;
  margin: auto;
  position: relative;
}

#inner {
  height: 50px;
  width: 50px;
  background-color: red;
  transition: all .5s;
  position: absolute;
  right: 0;
}

#inner:hover {
  width: 150px;
}

<div id="outer">
  <div id="inner"></div>
</div>