html - 悬停时具有多种颜色叠加的 Div

Question

我想在图像上创建悬停效果，当鼠标悬停在多个彩色 div 上时会出现该效果。我想我可以用 CSS 做到这一点，但我无法获得我想要的结果。

我的最终目标是:

HTML:

<div class="row thumbrow">
<ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-4 thumbgrid">
    <li>
        <div class="thumb">
                {{ cms:page_file:thumb_one.image:image}}
                <span class="center">{{ cms:page:thumb_one.text:string }}</span>
            <div class="yellow">                    
            </div>
        </div>
    </li>
</ul>
</div>

CSS:

.thumb {
    display:inline-block;
    position: relative;
    height: 170px;
    overflow: hidden;
}
.thumb:after {
    background: rgba(255,255,255,.8); 
    content:'';
    display: block;
    height: 170px;
    left: 0;
    opacity: 0;
    padding: 20px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.thumb:hover:after {
    opacity: 1;
    padding: 20px;
    transition: opacity .4s;
}

.thumb:hover .yellow {
    content:'';
    display: block;
    height: 170px;
    left: 0;
    opacity: 1;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 5;
    background: #f9d33a;
}  

span.center {
    color: white;
    position: relative;
    top: -100px;
    z-index: 3;
}

Answer 1

作为评论，最重要的部分是缺少元素 .yellow 和 .center 的 css position:absolute

我已经运行了一个演示 here

选择器 :after 的使用不是必需的，在演示中 CSS 已缩短为:

.thumb {
    display:inline-block;
    position: relative;
    height: 170px; width:100%;
    overflow: hidden; 
}
.thumb .yellow, .thumb .center { display:none; }
.thumb:hover .yellow {
    content:'.'; display: block;
    position: absolute; z-index: 1;
    bottom:10px; left: 10px; right:10px; top: 10px;
    background: #f9d33a; opacity: 0.5;
}  
.thumb:hover .center {
    display:block; color: white;
    position: absolute; z-index: 2;
    top: 20px; left: 20px; right: 20px; bottom:20px;
}

---

一些值(比如我编的上、下、左、右偏移量)，关键部分是position:absolute