如何在悬停时增加div列的高度以保留其他列的位置？

Question

Trying to implement this for 2 days with no luck. Here's the thing: there's a typical row with regular columns with additional product class:

<div class="row">

    <div class="col-lg-4 product">
        // Content
    </div>

    <div class="col-lg-4 product">
        // Content
    </div>

    <div class="col-lg-4 product">
        // Content
    </div>

    .....
</div>

And here's the CSS rule, that changes the height on hover

.product:hover {
  height: 500px;
}

What I need is to stay other column divs when a hover is made. It must look like as the following:

However it renders as (below div columns go down due to "height overload"):

So I've tried several options:

• Giving product class absolute position
• Giving product class relative position
• Tried to wrap inner content in another product-wrapper div giving absolute|relative position types.

None of this worked.

Is it possible to achieve that within bootsrap row columns? And if so, then how?

Answer 1

Wrap the product div in a new div with position: relative . Then set the product div to position:absolute and use Z-index to make sure it shows over adjacent divs.

http://codepen.io/sol_b/pen/VmXbzV

<div class="row">
    <div class="product-wrap">
        <div class="product"></div> 
    </div>         
    <div class="product-wrap">
        <div class="product"></div> 
    </div>            
    <div class="product-wrap">
        <div class="product"></div> 
    </div>      
  <div class="product-wrap">
        <div class="product"></div> 
    </div>         
    <div class="product-wrap">
        <div class="product"></div> 
    </div>            
    <div class="product-wrap">
        <div class="product"></div> 
    </div>    
  <div class="product-wrap">
        <div class="product"></div> 
    </div>         
    <div class="product-wrap">
        <div class="product"></div> 
    </div>            
    <div class="product-wrap">
        <div class="product"></div> 
    </div>    
</div>


.row{
    position: relative;
    width:550px;
    height:500px;
    margin: 0 auto;
}
.product-wrap{
    position:relative;
    float:left;
    width:150px;
    height:150px;
    margin:10px;
}
.product{    
    background:black;
    position:absolute;
    top:0;
    left:0;
    width:150px;
    height:150px;
  transition: 0.2s;
}
.product:hover{
    z-index:100;
    width: 150px;
    height:200px;
    background: grey;
}

Answer 2

You may use the transform scale property like the exemple below as well:

https://codepen.io/wifeo/pen/qzwkb

<link href='http://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'>

<div align="center" class="fond">
<div style="width:1000px;">

<div class="style_prevu_kit" style="background-color:#cb2025;"></div>
<div class="style_prevu_kit" style="background-color:#f8b334;"></div>
<div class="style_prevu_kit" style="background-color:#97bf0d;"></div>
<div class="style_prevu_kit" style="background-color:#00a096;"></div>
<div class="style_prevu_kit" style="background-color:#93a6a8;"></div>


<div style=" padding:5px; color:#b5e6e3; font-weight:300; font-size:30px; font-family:'Roboto';padding-top:20px;">CSS <font style="font-weight:400;">HOVER</font></div>
        <a href="http://www.wifeo.com/code" style="text-decoration:none;" target="_blank"><div style="  color:#b5e6e3; font-weight:300; font-size:20px; font-family:'Roboto';">www.wifeo.com/code</div></a>

</div>
</div>

.fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0;
 background-color:#00506b;}

.style_prevu_kit
{
    display:inline-block;
    border:0;
    width:196px;
    height:210px;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   

}
.style_prevu_kit:hover
{
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
}