divの上端を下に移動すると、下に移動します

Question

私のdivを作成しようとしていますが、現在の位置にホバーを置いていますが、下にはホバーしているものが必要です高さの、どのように私はflexboxを使用せずにこれを達成することができますか？
これは、現在起こっ：https://i.gyazo.com/746b8f3eb1ade6d870439ad4826adf9e.mp4

.p-block { 
width: 100%; 
margin-left: 10%; 
margin-right: 10%; 
} 

.project-block { 
margin-left: 20px; 
display: inline-block; 
width: 20%; 
background-color: #000; 
height: 300px; 
} 

.project-block:hover { 
height: 380px; 
} 

をとhtmlは

  <div class="p-block"> 
       <div class="project-block"> 
       </div> 
       <div class="project-block"> 
       </div> 
       <div class="project-block"> 
       </div> 
       <div class="project-block"> 
       </div> 
      </div> 

Answer 1

を参照してください以下の通りであるかのヘルプ：

.p-block { 
 
    width: 100%; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
} 
 

 
.project-block { 
 
    margin-left: 20px; 
 
    display: inline-block; 
 
    margin-top: 80px; 
 
    width: 20%; 
 
    background-color: #000; 
 
    height: 300px; 
 
} 
 

 
.project-block:hover { 
 
    height: 380px; 
 
    margin-top: 0; 
 
}

<div class="p-block"> 
 
    <div class="project-block"> 
 
    </div> 
 
    <div class="project-block"> 
 
    </div> 
 
    <div class="project-block"> 
 
    </div> 
 
    <div class="project-block"> 
 
    </div> 
 
</div>

Answer 2

このお試しください：コードを提供

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    box-sizing: border-box; 
 
} 
 

 
body, 
 
html { 
 
    width: 100%; 
 
    height: 100$; 
 
} 
 

 
.p-block { 
 
    width: 100%; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
    margin-top: 40px; 
 
} 
 

 
.project-block { 
 
    margin-left: 20px; 
 
    display: inline-block; 
 
    width: 20%; 
 
    background-color: #000; 
 
    height: 300px; 
 
} 
 

 
.project-block:hover { 
 
    margin-top: -40px; 
 
    padding-top: 40px; 
 
    background: black; 
 
    height: 340px; 
 
}

<div class="p-block"> 
 
    <div class="project-block"> 
 
    </div> 
 
    <div class="project-block"> 
 
    </div> 
 
    <div class="project-block"> 
 
    </div> 
 
    <div class="project-block"> 
 
    </div> 
 
</div>