Trying to make div boxes expand

Question

Currently im trying to create a nextflix clone. my issue is that when i hover over a movie box, it expands but also pushes the other movie boxes down and only expands in one direction. not sure how to fix this. thanks in advance.

html

    <div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

css

*{
  margin: 0;
  padding: 0;
}
.wrapper{
  height: 400px;
  width: 100%;
  background-color: black;
  position: absolute;
}

.box{
  height: 100px;
  width: 100px;
  background-color: blue;
  margin-top: 50px;
  margin-bottom: 50px;
  display: inline-block;
  transition: .5s;
}

.box:hover{  
  height: 200px;
  width: 200px;
}

https://codepen.io/shauneb/pen/Epoxrx //example of the issue im facing

Answer 1

I don't know if it is what you want but, you can use css to modify the size of a block without it moving its siblings by using transform: scale(2); in the hover css.

Scale resizes the element to the viewer, but the "volume" of the element stays the same, so it doesn't move the other div

Modification of your example using scale:

*{
  margin: 0;
  padding: 0;
}
.wrapper{
  height: 400px;
  width: 100%;
  background-color: black;
  position: absolute;
}

.box{
  position: relative;
  height: 100px;
  width: 100px;
  background-color: blue;
  margin-top: 50px;
  margin-bottom: 50px;
/*   position: absolute; */
  display: inline-block;
  transition: .5s;
}

.box:hover{
  z-index: 1;
  transform: scale(2);
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box" style="background-color: green"></div>
  <div class="box" style="background-color: violet"></div>
  <div class="box"  style="background-color: red"></div>
</div>

note: I also added a position: relative to the boxes and a z-index to make sure that the one you are hover will be always on the top of the other elements.

https://codepen.io/ancode/pen/pZpJRN