Question

我目前正在尝试为某些产品网关设置图像悬停效果，但我注意到一个我无法找到源的问题 - 图像叠加本身似乎正在逃避它的父div（图片下的额外报道）：

原位问题：http://energy-hypermarket.org/sandbox

HTML

    <div class="boxholderleft">
    <div class="productbox">
    <div class="img-wrap">
    <a href="/boilers"><img src="http://energy-hypermarket.org/wp-content/uploads/boiler.box.jpg" alt="Boilers" /></a><div class="img-overlay">
    <h4>Title</h4>
    <p>A description of the image</p>
    </div>
    </div>
    <div class="boxtext"><h2><a href="/boilers">Boilers</a></h2>
    Heat your home properly whilst saving money with an energy efficient boiler.</div>
    </div>
    </div>

CSS

    .boxholderleft {
    float: left;
    height: auto;
    padding-bottom: 40px;
    padding-right: 20px;
    width: 50%;
    }

    .productbox {
    background-color: #FFFFFF;
    border:1px solid rgba(0, 0, 0, 0.09);
    height: auto;
    text-align: left;
    float:left;
    }

    .img-wrap{
    height:auto;
    overflow:hidden;
    position:relative;
    width:100%;
    }

    .img-overlay{
    background-color:#000;
    bottom:0;
    color:#fff;
    opacity:0;
    filter: alpha(opacity = 0);
    position:absolute;
    width:100%;
    height:100%;
    z-index:1000;
    }

    .img-overlay h4, .img-overlay p{
    padding:0 10px;
    text-align: center;
    vertical-align:middle;
    }

    .img-wrap:hover .img-overlay{
    opacity:0.45;
    filter: alpha(opacity = 45);
    transition:opacity 0.25s;
    -moz-transition:opacity 0.25s;
    -webkit-transition:opacity 0.25s;
    }

    .boxtext h2 a{
    font-size: 25px;
    color:#5e5e5e !important;
    line-height:33px !important;
    }

    .boxtext h2 a:hover {
    color:#0FABA2 !important;
    -webkit-transition: color 0.2s ease-out;
    -moz-transition: color 0.2s ease-out;
    -o-transition: color 0.2s ease-out;
    }

提前感谢任何人提供的任何见解，我正在撕扯我的头发。

Answer 1

这是因为你的图片有margin-bottom:15px;（img在.img-wrap中）。我不知道CSS的结构，但我相信这可以解决这个特定情况和其他项目的问题。

CSS
.img-wrap a img{margin-bottom:0;}

如果这没有用，那么你需要添加更多CSS（可能是类或更好的路径）并删除此边距底部。希望它有所帮助。

Answer 2

太棒了 - 添加'display：block'并删除图像上的下边距修复了问题。感谢Mr_b和popnoodles！（：

CSS图像叠加问题

2 个答案: