Question

我正在制作一个投资组合页面，并将每个项目与图像一起显示。

当用户将鼠标悬停在方框上时，我想让所有内容都可见。我有悬停部分工作，但它推动它下面的div。我希望它超越其他div的顶部，所以我可以给它一个阴影。我到处寻找，但解决方案不起作用。以下是相关的代码。

HTML

<div id="mainContent">

    <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
            <img src="http://lorempixel.com/300/200" alt="...">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae sequi minima saepe amet placeat reiciendis! Quod, qui magnam animi labore accusantium veniam eveniet dicta maxime ipsum ducimus mollitia obcaecati modi!</p>
                    <p><a href="#" class="btn btn-primary project-btn">View Project</a></p>
                </div>
            </div>
        </div>
   </div>

   <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
            <img src="http://lorempixel.com/300/200" alt="...">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae sequi minima saepe amet placeat reiciendis! Quod, qui magnam animi labore accusantium veniam eveniet dicta maxime ipsum ducimus mollitia obcaecati modi!</p>
                    <p><a href="#" class="btn btn-primary project-btn">View Project</a></p>
                </div>
            </div>
        </div>
   </div>

JS

$('.thumbnail').hover(function() {
 var pos = $(this).offset();
 $( this ).animate({
     height: "455px"
 }, 200);
 }, function() {
     $( this ).animate({
     height: "187px"
 }, 200);

}）;

CSS

.thumbnail {
    padding: 4px;
    line-height: 1.428571429;
    background-color: #E7E7E7;
    border: 1px solid #DDD;
    border-radius: 4px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: inline-block;
    max-width: 100%;
    height: 210px;
    width: 400px;
    display: block;
    overflow: hidden;
    margin-bottom: 20px;

}

这是我到目前为止的一个方面：http://jsfiddle.net/nS48w/2/

Answer 1

一个解决方案（很多）：绝对定位缩略图并设置z-index

请参阅： http://jsfiddle.net/qNuY4/1/

.thumbnail {
    ....
    display: block;
    position: absolute;
    ....
}

.top { top: 10px; z-index: 100;}

.bottom {top: 250px; z-index: 90; }

在制作动画时让div超越另一个

1 个答案: