login100100 login100100 - 4 months ago 14
HTML Question

CSS inline-block objects expanding on hover, elements lose their order while hovered

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:

.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 }


And JSfiddle: https://jsfiddle.net/6Lms6ve8/

Answer

Here is a solution for you where they stay in place on hover.

This can be done with a pseudo element as well, though I used an extra div if you intend to have more content inside it.

.floating-box {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 125px;
  margin-bottom: 2px;
  vertical-align: top;
}
.floating-box .box-wrapper {
  width: 100%;
  height: 100%;
  border: 1px solid #aaaa80;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}

.floating-box:hover .box-wrapper {
  height: 150px;
  position: absolute;
  background-color: #e0e0d1;
  z-index: 1;
}
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>
<div class="floating-box">
  <div class="box-wrapper">
    <span style="font-size:12px; text-align: justify;">sample text here</span>
  </div>
</div>