CSS伪类可以为网页添加一些特殊的外观和交互效果。其中之一是遮眼罩，可以通过:hover伪类实现。下面是一些示例代码：

/* 基本样式 */
.mask {
position: relative;
display: inline-block;
}
.mask .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s ease-out;
}
/* 鼠标悬停时的样式 */
.mask:hover .content {
opacity: 1;
}

在这个代码示例中，首先要创建一个含有内容的容器，以及一个用来覆盖容器的遮眼罩。当鼠标悬停在容器上时，遮眼罩会显示，从而遮挡住容器中的内容。

此外，也可以使用:before或:after伪元素来创建遮眼罩，如下所示：

/* 使用:before伪元素来创建遮眼罩 */
.mask {
position: relative;
display: inline-block;
}
.mask:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1;
opacity: 0;
transition: all 0.3s ease-out;
}
.mask:hover:before {
opacity: 1;
}
/* 使用:after伪元素来创建遮眼罩 */
.mask {
position: relative;
display: inline-block;
}
.mask:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("mask.png") center center no-repeat;
background-size: contain;
z-index: 1;
opacity: 0;
transition: all 0.3s ease-out;
}
.mask:hover:after {
opacity: 1;
}

以上是使用:before和:after伪元素创建遮眼罩的代码示例。通过修改background属性，在:before中使用rgba颜色，或在:after中使用图片来创建遮眼罩。