鼠標懸停彈出

Question

所以剛纔我正在查看其他人的投資組合網站，以獲得有關如何處理我的投資組合網站的一些靈感。

而且有些瀏覽後，我碰到一個整潔的小網站

http://www.brianclaire.com/

滾動下來到這裏的投資組合是。

我想知道設計師是如何設法在平板電腦上添加一個透明圖層的文字圖片，同時用鼠標在圖片上進行切換。

Answer 1

如果你看看開發人員工具文本是包裹在錨標記和「覆蓋」的CSS類應用於它。

.overlay { 
    width: 101%; 
    height: 100%; 
    background: #000; 
    position: absolute; 
    z-index: 1; 
    display: block; 
    filter: alpha(opacity=80); 
    -moz-opacity: 0.8; 
    -khtml-opacity: 0.8; 
    opacity: 0.8; 
} 

最後四個屬性用於使元素看起來透明。