Изменение размеров картинки сдвигает рядом стоящие с ней элементы

Question

У меня есть header в котором есть картинка, которая ведет на главную страницу и рядом пункты меню в ряд.

Я хочу что бы при наведении на картинку она увеличивалась в размере, но не сдвигала пункты меню.

Если я меняю ее размеры то все улетает

Что делать?

Answer 1

Для того что бы элементы не сдвигались при наведении можно воспользоваться свойством transform и задать величину увеличения объекта при наведении на него:

img {
  transition: transform 0.5s ease;
}

img:hoover {
  transform: scale(2);
}

Рабочий пример:

.header {
  display: flex;
  height: 40px;
}

.img {
  width: 40px;
  height;
  40px;
  background-color: red;
  transition: transform 0.5s ease;
}

.img:hover {
  transform: scale(2)
}

a {
  display: block;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

<div class="header">
  <div class="img"></div>
  <div class="wrapper">
    <a>Ссылка1</a>
    <a>Ссылка2</a>
    <a>Ссылка3</a>
    <a>Ссылка4</a>
    <a>Ссылка5</a>
    <a>Ссылка6</a>
    <a>Ссылка7</a>
  </div>
</div>

Более подробно про scale() можно посмотреть здесь.

БЛОГ НА HUSL

Изменение размеров картинки сдвигает рядом стоящие с ней элементы

Ответы (1 шт):