鼠标悬停弹出

Question

刚才我正在查看其他人的投资组合网站，以获得有关如何处理我的投资组合网站的灵感。

经过一番浏览，我遇到了一个整洁的小网站

http://www.brianclaire.com/

向下滚动到投资组合的位置。

我想知道设计师是如何设法在平板电脑上添加带文字的透明图层，同时用鼠标翻转来翻转图像。

Answer 1

如果您查看开发人员工具，则文本将包含在锚标记中，并且“overlay”将应用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;
}

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