求！怎么用html和css简单的写出这种效果！

就是鼠标放上去，.jpg上面就盖了一层黑色或者别的随便什么颜色的感觉，就这个效果。应该挺简单的

img


不知道实现这样的效果：hover具体的代码怎么写！有没有完整又具体的代码，让我参考一下啊，谢谢
前几天上课讲过了但是我给忘了，我知道这个对于很多人来说肯定是很简单的东西了 但是对于我来说是一个疑惑。

<head>
  <style>
    .box {
      position: relative;
      width: 200px;
      height: 200px;
    }

    .box .mask {
      position: absolute;
      display: none;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .7);
    }

    .box .img {
      height: 100%;
      width: 100%;
      object-fit: contain;
    }

    .box:hover .mask {
      display: initial;
    }
  </style>
</head>

<div class="box">
  <div class="mask"></div>
  <img class="img" src="https://img0.baidu.com/it/u=922902802,2128943538&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1664211600&t=fee67140516d0b5c4e7b7afc3fff34c7" alt="" />
</div>

在上面覆盖一个图层，设置hover属性 显示该图层