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

注释，重要部分是在CSS position:absolute为元素缺失.yellow和.center

我已经运行了一个演示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

Answer 2

您可以使用悬停选择与同胞选择沿在悬停上显示，类似于suckerfish菜单：

http://jsbin.com/qerucawe/3

http://jsbin.com/qerucawe/3/edit