1

ポートフォリオページを作っていて、各アイテムを画像付きで表示しています。

ユーザーがボックスの上にカーソルを置いたときにすべてが見えるようにしたい。ホバー部分が機能していますが、その下の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;

}

ここに私がこれまでに持っているもののjsfiddleがあります：http://jsfiddle.net/nS48w/2/

4

1 に答える 1

1

（多くの）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; }
于 2013-09-28T22:19:59.900 に答える