CSS 图像叠加问题

Question

我目前正在尝试为某些产品网关设置图像悬停效果，但我注意到一个问题，我无法找到其来源 - 图像叠加层本身似乎正在转义它的父 div(图片下方的额外覆盖范围):

http://jsfiddle.net/pzA6Y/1/

问题原地: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 inside a in .img-wrap)。我不知道你的 CSS 结构，但我相信这可以解决这个特定案例和其他元素的问题。

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

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