Как анимировать ширину и высоту div position:absolute?

Question

[yadomot]

Есть блок, position: absolute

при наведении увеличивается ширина

но если у блока заданы свойства top и left, то при наведении он увеличивается но и смещается вправо и вниз.

Как сделать увеличиние блока не смещая его центр?
Также как правильно указать в css transition-property width и height чтобы они увеличивались синхронно,
как при transition-property: all ?

Answer 1

[Денис Инешин]

Для этой задачи лучше всего подходит transform: scale(N);

UPD:
Центром изменений можно управлять с помощью transform-origin

Comments

[yadomot]

но всеравно центр блока смещается

[#rybak]

к
transform: scale(N);
добавь
transform-origin: 50% 50%;
и добавь
box-sizing: border-box; (если меняешь padding внутри блока)

Answer 2

[Дмитрий Новиков]

Вот вам стили для примера, внесите нужные изменения и пользуйтесь.

div{top:100px; left:100px; position:absolute; width:100px; height:100px; background:green; transition:0.5s ease all;}
div:hover{width:200px; height:200px; top:50px; left:50px; }

Comments

[Дмитрий Новиков]

вместо
transition:0.5s ease all;
можно использовать
transition:0.5s ease width, 0.5s ease height, 0.5s ease top, 0.5s ease left;
(но я не вижу в этом смысла для конкретно этого примера)

[yadomot]

есть смысл, т.к. там меняется еще padding и font-size :)
но вот еще завгвоздка, таких блоков у меня несколько на странице, и у каждого свои свойства top и left, то чтобы блок не менял свой центр, отдельно надо делать для каждого?

[Дмитрий Новиков]

либо для каждого отдельно, либо при :hover вместо top и left использовать отрицательные значения margin-top и margin-left

Answer 3

[Rithmsamba]

Используйте transform-origin
Почитать можно тут