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

您需要更改叠加层height的{{1}}并相应地调整div偏移量。

bottom

Updated jsFiddle

如何增加信息叠加的高度

1 个答案: