Increase width of a div from right to left direction

Question

I have three divs on the screen aligned horizontally with grid layout, so I have a maximize button to maximize the div so that it will take the whole space of the screen and the other two divs disappear, so when I do it with the first div, the width of the div increases to 100vw with growing effect which starts from left to right(using transitions), but when I do it with the other two divs , they also increase there width from left to right, but I actually want to do is increase the width of middle div from center to left and right and the last div from right to left to give a better animation, is there a way to do it?

Answer 1

transform-origin is what you are looking for

 .anim { background: red; width: 100px; height: 100px; transform-origin: right; transition: all 1s; position: absolute; right: 20px; }.anim:hover { width: 300px; }

 <div class="anim"></div>