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