коробка меняет размер при зависании

Question

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

Вот что я пытался сейчас:

.boydiv:hover{
width: 150px;
height: 250px;
background-color: #436eb1;

.boydiv{
width: 120px;
position: fixed;
top: 300px;
left: 150px;
border: solid;
border-color: black;
border-radius: 12px;
margin: 5px;
padding: 5px;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
animation-name: boydiv;
animation-duration: 0s; 

Answer 1

В состоянии: hover вы не меняете верхнюю и левую позиции. Поэтому верхний левый угол элемента будет расти в другом направлении.

Что вы можете сделать, это использовать flex-box (https://css-tricks.com/snippets/css/a-guide-to-flexbox/), или более простое решение - расположить объект в его центральной позиции, а затем используйте «transform: translate (-50%, -50%)», чтобы перецентрировать его. Итак:

.boydiv {
    position: fixed;
    top: 410px;
    left: 210px;
    width: 120px;
    height: 220px;
    transform: translate(-50%, -50%);
}
.boydiv:hover {
    width: 150px;
    height: 250px;
}

Answer 2

Есть много способов сделать это. Вы можете использовать такой контейнер flex, например:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.boydiv:hover{
width: 200px;
height: 180px;
background-color: #436eb1;
}

.boydiv{
width: 120px;
height: 100px;
border: solid;
border-color: black;
border-radius: 12px;
margin: 5px;
padding: 5px;
transition: all .2s linear;
 cursor: pointer;
}

<div class="boydiv"></div>