Question

我使用的主要结构是：

<div class="portfolio-thumbs">
    <div class="col-md-4 thumb-item">
        <a href="#">
            <div class="thumb-img">
                <img src="./img/portfolio/rocksea.jpg" class="img-responsive" />
                <div class="thumb-overlay"></div>
            </div>
        </a>
    </div>
   ...
</div>

我创建了一个完整的JS小提琴here

我正在寻找为图像添加半透明叠加层（稍后将添加过渡和一些内容从每个图像的底部滑入），但似乎无法让它出现。

与SO上的其他几篇文章进行了比较，但似乎没有一篇符合该法案。

之前我已经做了一千次了，不知道这有什么问题吗？

Answer 1

在@ZachSaucier的帮助下，为树中的所有元素添加100％的高度。还添加：

div.latest-work div.portfolio-thumbs div.thumb-item a div.thumb-img div.thumb-overlay {
    position: absolute;
    top: 0;
}

使叠加层位于图像的顶部。

更新了小提琴here

CSS叠加层没有出现在<img/>上？

1 个答案: