Div Previous Siblings is not reducing it's size - css

Question

I have a code where div should increase its size to twice. It's working, but the previous siblings after hover are not increasing their size.
When I hover the first box, the rest of them change their size. When I hover the second box, the bottom boxes size changes but the first box doesn't change its size. I want to target the previous siblings too while hovering the box.
* {
box-sizing: border-box;
transition: 0.5s ease all;
}
body {
margin: 20px;
font-family: calibri;
}
.box1 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FF7F50;
margin: 0 auto 20px auto;
}
.box2 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #6495ED;
margin: 0 auto 20px auto;
}
.box3 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FFF8DC;
margin: 0 auto 20px auto;
}
.box4 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #DC143C;
margin: 0 auto 20px auto;
}
.box5 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #00FFFF;
margin: 0 auto 20px auto;
}
.box5 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #00008B;
margin: 0 auto 20px auto;
}
.box6 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #008B8B;
margin: 0 auto 20px auto;
}
.box7 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #B8860B;
margin: 0 auto 20px auto;
}
.box8 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #006400;
margin: 0 auto 20px auto;
}
.box9 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #B22222;
margin: 0 auto 20px auto;
}
.box10 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #E9967A;
margin: 0 auto 20px auto;
}
.box11 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FF1493;
margin: 0 auto 20px auto;
}
.box12 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #9400D3;
margin: 0 auto 20px auto;
}
.box div:hover~* {
width: 100px;
height: 100px;
}
<section class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
<div class="box12"></div>
</section>

Answer 1

There is a way to achieve this. The trick is to target the parent div and expand all descendant but force the hovered element to not expand.
But you'll run into a different problem. When the boxes on top expand it pushes the box you are hovering over down and you lose the hover for that particular box. If it was something like a flip effect we would have no problem.
Check out the solution below and you'll know what am talking about. Hopefully you'll be able to figure out something for this. All the best.
* {
box-sizing: border-box;
transition: 0.5s ease all;
}
body {
margin: 20px;
font-family: calibri;
}
.box {
width: 100px;
margin: auto;
text-align: center;
}
.box1 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FF7F50;
margin: 0 auto 20px auto;
}
.box2 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #6495ED;
margin: 0 auto 20px auto;
}
.box3 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FFF8DC;
margin: 0 auto 20px auto;
}
.box4 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #DC143C;
margin: 0 auto 20px auto;
}
.box5 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #00FFFF;
margin: 0 auto 20px auto;
}
.box5 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #00008B;
margin: 0 auto 20px auto;
}
.box6 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #008B8B;
margin: 0 auto 20px auto;
}
.box7 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #B8860B;
margin: 0 auto 20px auto;
}
.box8 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #006400;
margin: 0 auto 20px auto;
}
.box9 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #B22222;
margin: 0 auto 20px auto;
}
.box10 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #E9967A;
margin: 0 auto 20px auto;
}
.box11 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FF1493;
margin: 0 auto 20px auto;
}
.box12 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #9400D3;
margin: 0 auto 20px auto;
}
.box:hover>* {
width: 100px;
height: 100px;
}
.box>*:hover {
width: 50px;
height: 50px;
margin-bottom: 20px;
margin: 0 auto 20px auto;
}
<section class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
<div class="box12"></div>
</section>