使用悬停动画调整大小的图片不适合容器

Question

我使用Library

在屏幕上放置了一些图像

它对我来说很好用！

然后我想添加一个我找到的悬停效果here

当我将效果添加到左下角的图像时，布局被添加了一些奇怪的边框。 现在它看起来像是：

我的HTML看起来像这样：

<div class="referencesPics"> 
            <div class="line1 ">
                <div class="leftPic imgLiquidFill imgLiquid">
                    <img alt="car" src="../img/media/referencesPic.jpg" />
                </div>
                <div class="middlePic imgLiquidFill imgLiquid">
                    <img alt="car" src="../img/media/referencesPic.jpg" />
                </div>
                <div class="rightPic imgLiquidFill imgLiquid">
                    <img alt="car" src="../img/media/referencesPic.jpg" />
                </div>
            </div>
            <div class="line2">
                <div class="leftPic imgLiquidFill imgLiquid">
                <img alt="car" src="../img/media/referencesPic.jpg" />
                </div>
                <div class="middlePic imgLiquidFill imgLiquid">
                    <img alt="car" src="../img/media/referencesPic.jpg" />
                </div>  
                <div class="rightPic imgLiquidFill imgLiquid">
                    <img alt="car" src="../img/media/referencesPic.jpg" />
                </div>
            </div>

            <div id="effect-2" class="line3 effects">
                <div class="leftPic imgLiquidFill imgLiquid img">
                <img alt="car" src="../img/media/referencesPic.jpg" />
                <div class="overlay">
                    <a href="#" class="expand">+</a>
                    <!-- <a class="close-overlay hidden">x</a> -->
                </div>

                </div>
                  <div class="middlePic imgLiquidFill imgLiquid">
                 <img alt="car" src="../img/media/referencesPic.jpg" />
                </div> 
                <div class="rightPic imgLiquidFill imgLiquid">
                <img alt="car" src="../img/media/referencesPic.jpg" />
                </div>
            </div>

        </div>      

Liquid Image of resize库的脚本与示例代码完全相同：

    $(document).ready(function() {
    $(".imgLiquidFill").imgLiquid();
});

我的CSS代码：

#section1.section .referencesPics {
    height:33.3333%;
}

#section1.section .referencesPics .line1 {
    height:100%;
}

#section1.section .referencesPics .line1 .leftPic {
    height:100%;
    width:25%;
    background-color:#F3A008;
    float: left;
}

#section1.section .referencesPics .line1 .middlePic {
    height:100%;
    width:50%;
    background-color:#F3A008;
    float: left;
}

#section1.section .referencesPics .line1 .rightPic {
    height:100%;
    width:25%;
    background-color:#950049;
    float: left;
}

#section1.section .referencesPics .line2 {
    height:100%;
}

#section1.section .referencesPics .line2 .leftPic {
    height:100%;
    width:25%;
    background-color:#950049;
    float: left;
}

#section1.section .referencesPics .line2 .middlePic {
    height:100%;
    width:50%;
    background-color:#F3A008;
    float: left;
}

#section1.section .referencesPics .line2 .rightPic {
    height:100%;
    width:25%;
    background-color:#F3A008;
    float: left;
}

#section1.section .referencesPics .line3 {
    height:100%;
}

#section1.section .referencesPics .line3 .leftPic {
    height:100%;
    width:25%;
    background-color:#F3A008;
    float: left;
}

#section1.section .referencesPics .line3 .middlePic {
    height:100%;
    width:50%;
    background-color:#F3A008;
    float: left;
}

#section1.section .referencesPics .line3 .rightPic {
    height:100%;
    width:25%;
    background-color:#950049;
    float: left;
}

我不知道应该更改什么来移除白色边框。 有人建议我应该改变什么吗？

感谢您的帮助！

Answer 1

它很可能是你插入两种风格之间的冲突。

也许这可以帮到你？

#section1.section .referencesPics .line3 .rightPic {
    height:100%;
    width:25%;
    background-color:#950049;
    float: left;
    position: absolute;
    right: 0;
    bottom: 0;
}

您也可以尝试移动它以适合您的容器。

{{1}}