鼠标悬停弹出

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; 
} 

最后四个属性用于使元素看起来透明。