CSS вопрос наведения (наложение)

Question

У меня проблема с CSS. Все, что мне нужно, это позволить моему изображению накладываться на другие изображения при наведении, но сохранять позиции всех изображений. На данный момент это выглядит так.

Для моих целей мне нужно сохранить все позиции, даже позиции изображений, которые я пытаюсь :hover.

.image-design {
  width: 215px;
  height:250px;
  margin-Top:8px;
  margin-Left:8px;                
  margin-Right:8px;
  outline: solid 1.5px #FC5185;
  transition: outline 0.6s linear;
}
.image-design:hover {
  outline-width: 5px;
  outline-color: rgb(119, 230, 245);
  background: cover;
  height: 400px;
  width: 300px;
}

Это близко к тому, что я хочу, но мой flexbox тянет изображение из второго ряда в первый ряд, и теперь на экране только 11 изображений (12 в начале)

Answer 1

Не изменяйте ширину и высоту изображения при наведении, но добавляйте масштабирование:

.image-design:hover {
  outline-width: 5px;
  outline-color: rgb(119, 230, 245);
  background: cover;
  transform: scale(1.5);
}