css在已有的小卡片上添加一个遮罩，鼠标经过会显示该遮罩和遮罩上的文字

要在已有的小卡片上添加遮罩和鼠标经过时显示该遮罩和遮罩上的文字，可以使用CSS中的伪元素和:hover伪类来实现。具体的实现方法如下：

1. 首先，在小卡片的外层容器中添加一个遮罩层，可以使用绝对定位将其覆盖在小卡片上方，然后设置其宽高和背景色，如下所示：

.card {
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置遮罩层的背景色和透明度 */
  opacity: 0; /* 初始状态下遮罩层不显示 */
  transition: opacity 0.3s ease; /* 设置遮罩层的过渡效果 */
}

2. 接下来，在遮罩层中添加要显示的文字，可以使用绝对定位将其居中显示，如下所示：

.card::before {
  /* ... */
  display: flex; /* 将遮罩层设置为弹性布局 */
  justify-content: center; /* 在水平方向上居中对齐 */
  align-items: center; /* 在垂直方向上居中对齐 */
  color: #fff; /* 设置文字颜色 */
  font-size: 1.2rem; /* 设置文字大小 */
  font-weight: bold; /* 设置文字加粗 */
  text-align: center; /* 设置文字居中对齐 */
  content: "显示的文字"; /* 设置要显示的文字 */
}

3. 最后，使用:hover伪类来控制遮罩层的显示和隐藏，如下所示：

.card:hover::before {
  opacity: 1; /* 鼠标经过时遮罩层显示 */
}

这样就可以在已有的小卡片上添加遮罩和鼠标经过时显示该遮罩和遮罩上的文字了。