带有悬停动画的已调整大小的图像不适合容器

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;
}