Width and height of CSS transition from center of div

Question

I have elements with position: absolute; that I want to go into certain situations. However, the beginning of the transition in width and height depends on the values ​​of the upper / lower left / right.

Is there a way to get more control over this?

I am specifically looking for a transition from the center of the div.

Is there any solution that does not also rely on the transition of upper / lower left / right values?

---

Edit

I want to keep the width and height.

Thanks for the answers, but using scale conversion is not a solution in this case. The percentage in the Conversion Property refers to the size of the box border of the element, and not to the container. See for example this JSFiddle , how the end result of hovering over two elements is different.

---

Jsfiddle

div, span { width:30%; height:30%; background:pink; transition:all 1s ease; position:absolute; } *:hover{ width:10%; height:10%; } div{ top:10%; left:10%; } span{ bottom:10%; right:10%; } 

 <div></div> <span></span> 

Answer 1

Well, you can always use conversion scale:

 div { background:pink; width:200px; height:200px; transition:all 1s ease; } div:hover{ -webkit-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); } 

 <div></div> 

Answer 2

You can change the position at the same time to simulate the effect. But I'm with others: transform: scale is the best approach to this.

 div, span { width:30%; height:30%; background:pink; transition:all 1s ease; position:absolute; } div{ top:10%; left:10%; } div:hover{ width:10%; height:10%; top: 20%; left: 20%; } span{ bottom:10%; right:10%; } span:hover{ width:10%; height:10%; bottom: 20%; right: 20%; } 

 <div></div> <span></span> 

Version with conversions:

 div, span { width:30%; height:30%; background: red; transition: all 1s ease; position: absolute; } div{ top:10%; left:10%; } div:hover{ transform-origin: 50% 50%; transform: scale(0.3); } span{ bottom:10%; right:10%; } span:hover{ transform-origin: 50% 50%; transform: scale(0.3); } 

 <div></div> <span></span> 

Answer 3

I would suggest using transform: translate when animating positions, as it’s better for performance , and then you can control its start using transform-origin .

And if you want to change the width or height, you can use transform: scale same way.

Say you want to double something in size from the center out. Then you just need to write transform: scale(2.0) , since the default value of transform-origin is 50% 50% .

See an example here: https://jsfiddle.net/ydpx284g/

Answer 4

Not sure if this is exactly what you are looking for, but this solution is not based on transform: scale , and you can manually set the required width and height of your div to hover even in percent.

And a percentage relative to the width of the container.

HTML

 <div id="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> 

CSS

 #container{ width: 400px; height: 400px; background: #eee; position: relative; } .box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #000; width: 20%; height: 20%; transition: 0.3s; cursor: pointer; } .box:hover{ width: 7%; height: 10%; } .box:nth-child(2){ left: 20%; } .box:nth-child(3){ top: 20%; } .box:nth-child(4){ top: 20%; left: 20%; } 

 #container { width: 400px; height: 400px; background: #eee; position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #000; width: 20%; height: 20%; transition: 0.3s; cursor: pointer; } .box:hover { width: 7%; height: 10%; } .box:nth-child(2) { left: 20%; } .box:nth-child(3) { top: 20%; } .box:nth-child(4) { top: 20%; left: 20%; } 

 <div id="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> 

Answer 5

You can try using transform: translate(-50%, -50%); if that helps.

 .example { width: 30%; height: 30%; background: pink; transition: all 1s ease; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .example:hover { width: 10%; height: 10%; } 

 <div class="example"></div> 

Answer 6

The best way is to use a matrix, which allows you to combine transitions and transformations. Matrix takes 6 arguments

transform: matrix (a, b, c, d, e, f);

Where

a = x-axis scale

b = skewX

c = skewY

d = y-axis scale

e = position X

f = position Y

In this case, I set the scale on the X axis (which will change the width) to double the initial width after hovering. (value 2 means the initial time of scale 2) The scale on the Y axis does not change (value 1 means the initial value of scale 1, so the height will not change) The remaining arguments are 0, because in this case they do not need to be used.

 .example { width: 30%; height: 30%; background-color: pink; position: absolute; top: 35%; left: 35%; transition: width, height, transform 1s; } .example:hover { transform: matrix(2, 0, 0, 1, 0, 0); } 

 <div class="example"></div>