Как увеличить размер элемента при наведении, не сдвигая соседние элементы?

Использовать CSS-свойства transform: scale() или z-index в сочетании с позиционированием.

Пример с transform: scale():

.element {
  transition: transform 0.3s ease; /* Плавный переход */
  transform-origin: center center; /* Масштабирование из центра */
}

.element:hover {
  transform: scale(1.1); /* Увеличиваем в 1.1 раза */
}

Пример с z-index и позиционированием:

.container {
  position: relative; /* Контейнер для позиционирования */
}

.element {
  position: absolute; /* Элемент позиционируется абсолютно */
  /* Другие стили позиционирования (top, left и т.д.) */
  transition: transform 0.3s ease;
  transform-origin: center center;
  z-index: 1; /* Начальный z-index */
}

.element:hover {
  transform: scale(1.1);
  z-index: 10; /* Увеличиваем z-index при наведении */
}

transform: scale() предпочтительнее, так как не влияет ни на макет, ни на поток документа. z-index нужен для того, чтобы увеличенный элемент находился поверх соседних.