How to increase the size of an element on hover without shifting neighboring elements?

Use CSS properties transform: scale() or z-index in combination with positioning.

Example with transform: scale():

.element {
  transition: transform 0.3s ease; /* Smooth transition */
  transform-origin: center center; /* Scale from the center */
}

.element:hover {
  transform: scale(1.1); /* Increase size by 1.1 times */
}

Example with z-index and positioning:

.container {
  position: relative; /* Container for positioning */
}

.element {
  position: absolute; /* Element is positioned absolutely */
  /* Other positioning styles (top, left, etc.) */
  transition: transform 0.3s ease;
  transform-origin: center center;
  z-index: 1; /* Initial z-index */
}

.element:hover {
  transform: scale(1.1);
  z-index: 10; /* Increase z-index on hover */
}

transform: scale() is preferable because it does not affect the layout or document flow. z-index is used to ensure the scaled element appears above neighboring elements.