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

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 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;
    border: 0px solid black;
}

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

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