如何增加保留其他列位置时悬停的列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); 
}