title: CSS inline-block objects expanding on hover, elements lose their order while hovered
body: <p>Im using HTML and CSS to make few inline-block boxes that expands on hover. But the problem is, while hovering on any block different than last one one of the boxes disappear, and while selecting first one in line something weird happens and one of them is moving to line above. I have tried diffrent things, but seems nothing helps. Here is CSS code: </p>
  
  <pre><code>.floating-box {
      display: inline-block;
      width: 120px;
      height: 125px;
      margin-bottom: 1px;
      border: 1px solid #aaaa80;
      text-align: center;
      overflow: hidden;
      vertical-align: top;
  }
  
  .floating-box:hover {
      height:150px;
      padding-bottom: 5px;
      width:120px;
      position:absolute;
      background-color: #e0e0d1;
      padding-right: 1px 
  }
  </code></pre>
  
  <p>And JSfiddle: <a href="https://jsfiddle.net/6Lms6ve8/" rel="nofollow">https://jsfiddle.net/6Lms6ve8/</a></p>