javascript - 如何增加信息覆盖的高度

Question

基本上我有 3 张图片，它们有一个 h4 - 标题和一些文本:

<div class="container5">
    <h1 class="title2">Avantages</h1>
    <div class="col-md-4">
        <div class="mosaic-block bar">
            <a class="mosaic-overlay" style="background: #000;">
                <div class="details">
                    <h4 class="overlay-title">TEST1</h4>
                    <p class="overlay-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.<p>

                </div>
            </a>
            <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/desroches.jpg" alt="image08" /></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="mosaic-block bar">
            <a class="mosaic-overlay" style="background: #000;">
                <div class="details">
                    <h4 class="overlay-title">TEST2</h4>
                    <p class="overlay-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
                </div>
            </a>
            <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mightyicons.jpg" alt="image09" /></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="mosaic-block bar">
            <a class="mosaic-overlay" style="background: #000;">
                <div class="details">
                    <h4 class="overlay-title">TEST3</h4>
                    <p class="overlay-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
                </div>
            </a>
            <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/florian.jpg" alt="image10" /></div>
        </div>
    </div>

</div>

我正在使用马赛克叠加图像:

jQuery(document).ready(function() {
jQuery(function() {     
    jQuery('.bar').mosaic({
        animation   :   'slide'     //fade or slide
        });         
    });
});

我想要一个更大的叠加层来包含我的详细信息 div 中的所有文本!我怎样才能做到这一点？这是一个DEMO
谢谢!

Answer 1

您需要更改叠加层 div 的高度，并相应地调整bottom 偏移量。

.bar .mosaic-overlay 
{
  bottom: -120px;
  height: 120px;
}

Updated jsFiddle .