Question

如何使缩略图中的图像占据缩略图的整个空间，以便叠加div（＆＃34; 11月和＃34;）和slideToggle div（＆＃34; STEM＆中的女性和女孩）＃34;）不要坚持下去？

我使用jQuery和Bootstrap。当用户将鼠标悬停在图像上时，slideToggle会向上滑动，然后在鼠标离开时消失。但它并不适合图像; 11月也没有覆盖。

＆＃13;

$(document).ready(function () {
    $('.thumbnail').hover(function () {
        $('.slider', this).slideToggle('fast');
    });
    //$('.thumbnail').hover(function () {
    //    $('.slider', this).animate({
    //        opacity: 0.75,
            
    //        height: "toggle"
    //    }, 750, function () {
    //        //Animation complete.
    //    });
    //});

});

＆＃13;

.womens-overlay {
    position: absolute;
    background: rgba(0,0,0,1);
    top: 0;
    right: 0;
    padding: 2%;
    width: 35%;
    color: #FFFFFF;
}

/*Removes the automatic thumbnail frames.*/
.thumbnail {
    border: none;
    box-shadow: none;
    float: left;
    position: relative;
    margin: 5px;
    color: #333;
}

.thumbnail img {
    max-height: 100%;
    max-width: 100%;
}

.thumbnail .slider {
    border: none;
    box-shadow: none;
    display: none;
    opacity: 0.8;
    background: #D2D6E2;
    width: 100%;
    position: absolute;
    bottom:4px;
    padding: 5px;
}

.slider {
    position: absolute;
    padding-top: 0%;
}

＆＃13;

            <div class="col-sm-6 col-md-4">
                <div class="image-box">
                    <div class="thumbnail">
                        <img src="Images/celebrating-women-in-stem.jpeg" />
                        <div class="womens-overlay">
                            <h3>November</h3>
                        </div>
                        <div class="slider">
                            <h2>Women & Girls in STEM Month</h2>
                            <h3>EVENT</h3>
                            <p>This November, we are celebrating women and girls in STEM. Come join us!</p>
                            <button type="button" class="btn btn-primary">Learn More</button>
                        </div>
                    </div>
                </div>
            </div>

＆＃13;

Answer 1

添加每个功能，以便它可以在多个缩略图上运行。然后获取缩略图的高度并将.slider高度设置为相同。

$(document).ready(function () {
     $('.thumbnail').each(function(){
           // get height
           var height = $(this).height();
           // set slider height
           $(this).children('.slider').css({'height':height+'px'});
           $(this).hover(function () {
                $(this).children('.slider').slideToggle('fast');
           });
      });
});

然后设置overflow：隐藏在.thumbnail上

.thumbnail {
    border: none;
    box-shadow: none;
    float: left;
    position: relative;
    margin: 5px;
    color: #333;
    overflow: hidden;
}

小提琴 - https://fiddle.jshell.net/Jim_Miraidev/xrevsesq/

如何让缩略图占据缩略图的整个空间？

1 个答案: