html - 图像和 Div 叠加，效果不佳

Question

我认为这应该是一个快速的问题。我正在尝试使用悬停在 div 上创建一个简单的叠加层。这一半有效，因为图像没有被覆盖。

<div class="puzzlePieceContainer">
    <img class="back-link puzzleTileBack-4" style="display: none; margin-left: 0px;" alt="" />
    <div class="boxShadow arrowMargin">
        <div class="overlayContainer overlayBox">
            <div id="puzzleTile-4" class="puzzleTiles">
                <img src="http://debtsettlementlogic.com/wp-content/uploads/2013/09/debt-solutions-florida.jpg" alt="" width="300" height="199" />
                <h2 style="padding-top: 10px;">Solutions</h2>
            </div>
        </div>
    </div>
</div>

CSS:

 .overlayBox:hover   
{  
    background:rgba(0,0,0,.15);
}

这是我的 fiddle :http://jsfiddle.net/3aRY4/

如何获得叠加层覆盖整个 div 而不是图片周围的所有内容的效果？

Answer 1

一种方法是通过伪元素添加叠加层。只需相对于父元素绝对定位伪元素并使其覆盖整个元素即可。

Updated Example

.overlayBox {
    position:relative;
}
.overlayBox:hover:after {
    content:'';
    position:absolute;
    background:rgba(0, 0, 0, .15);
    top:0; bottom:0;
    left:0; right:0;
}