@yadomot

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

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

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

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

Как сделать увеличиние блока не смещая его центр?
Также как правильно указать в css transition-property width и height чтобы они увеличивались синхронно,
как при transition-property: all ?
  • Вопрос задан
  • 422 просмотра
Решения вопроса 1
IonDen
@IonDen Куратор тега CSS
JavaScript developer. IonDen.com
Для этой задачи лучше всего подходит transform: scale(N);

UPD:
Центром изменений можно управлять с помощью transform-origin
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
dmitriy_novikov
@dmitriy_novikov
Занимаюсь web-разработкой с 2010г. http://dmnv.ru
Вот вам стили для примера, внесите нужные изменения и пользуйтесь.

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; }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы