如何增加保留其他列位置時懸停的列div高度？

Question

試圖執行此爲2天沒有運氣。事情是這樣的：有一個典型的行與附加product類定期專欄：

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

而這裏的CSS規則，改變懸停高度

.product:hover { 
    height: 500px; 
} 

我需要的是保持其他列當懸停進行時divs。它必須看起來像如下所示：

但是它呈現爲（以下格列下去，由於「高過載」）：

所以，我已經試了好選項：

• 給予product類absolute位置
• 給予product類relative位置
• 嘗試來包裝內的內容在另一product-wrapper DIV給予absolute|relative位置類型。

這一切都不奏效。

是否有可能實現這一bootsrap row列內？如果是這樣，那麼如何？

Answer 1

裹在position: relative一個新的div產品div中。然後將產品div設置爲position:absolute並使用Z-index確保它顯示在相鄰的div上。

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

您可以使用transform scale property像下面爲例還有：

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); 
}