CSS transition width and height from center of div - html

Question

I have elements with position: absolute; that I want to transition in certain situations. However, the origin of the width and height transition seems to depend on the top/bottom left/right values.
Is there any way to have more control over this?
I am specifically looking to transition from the center of the div.
Is there any solution that doesn't rely on transitioning also the top/bottom left/right values?
Edit:
I want to keep the width and height transitioning.
Thank you for the answers but using Transform scale is not a solution in this case. Percentages in the Transform property refer to the size of the element's border box, not the container. See for example this JSFiddle, how the end result of hovering over the 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 transform - scale for that matter:
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

I would suggest using transform: translate when animating positions since it's better for performance and you can then control its origin with transform-origin.
And if you want to change the width or height you can similarly use transform: scale.
Say you want to double something in size from the center outwards. Then you'd just need to write transform: scale(2.0), since the default value of transform-origin is 50% 50%.
See example here: https://jsfiddle.net/ydpx284g/

Answer 3

You could change the position at the same time to simulate the effect. But I'm with the others: transform: scale is a better 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 transforms:
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 4

The best way is using matrix, this allows you to combine transitions and transformations.
The matrix takes 6 arguments
transform: matrix(a, b, c, d, e, f);
Where
a= scale X axis
b= skewX
c= skewY
d= scale Y axis
e= position X
f= position Y
In this case, I set the scale on the X axis (which is going to alter the width) to the double of the initial width after hover. (the value 2 means initial scale times 2)
The scale on the Y axis is not altered (the value 1 means initial scale times 1, so the height won't change) The rest of the arguments are 0 because you don't need to use them in this case.
.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>

Answer 5

Not sure if this is exactly what you're looking for, but this solution is not based on the transform: scale and you can manually set the desired width and height of your div on hover even in percentage.
And the percentage is 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 6

You can try using transform: translate(-50%, -50%); see 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 7

Is this what are you trying to achieve? using translate will change the position of the element based on the width and height of the element itself.
div, span {
width:30%;
height:30%;
background:pink;
transition:all 1s ease;
position:absolute;
transform: translate(-50%, -50%);
}
*:hover{
width:10%;
height:10%;
}
div{
top:25%;
left:25%;
}
span{
top:75%;
left:75%;
}
<div></div>
<span></span>