css 질문 다시 드려봅니다....

<style>

.wrap {width:900px;padding:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;border:1px solid black;}

.container {width:400px;height:95px;overflow:hidden; padding:10px;margin:10px;}

.container .box1 {width:100%;height:100px;border:1px solid red;background:#ccc;}

.container .box2 {width:100%;height:100px;border:1px solid red;margin-top:5px;background:red;}

.container:hover {overflow:visible;}
.box2:hover + .container {overflow:visible;}

</style>

<div class="wrap">
  <div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
  </div>
  
   <div class="container">
    <div class="box1">box3</div>
    <div class="box2">box4</div>
  </div>
  
   <div class="container">
    <div class="box1">box5</div>
    <div class="box2">box6</div>
  </div>
  
   <div class="container">
    <div class="box1">box7</div>
    <div class="box2">box8</div>
  </div>
  
   <div class="container">
    <div class="box1">box9</div>
    <div class="box2">box10</div>
  </div>
  
   <div class="container">
    <div class="box1">box11</div>
    <div class="box2">box12</div>
  </div>
</div>

이렇게 해서 

이렇게 하고 싶은데...

이렇게 나옵니다....

그니까 box2가 box5 를 덮고싶은데

안됩니다... 도와주세요......

https://codepen.io/phreun/pen/eYPZRxY