css代码

.img {
        position: relative;
        background: url("")
          no-repeat;
        background-size: 100%;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        cursor: pointer;
      }
      .img::before,
      .img::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        border-radius: 50%;
      }
      .img::before {
        background: rgba(0, 0, 0, 0.5);
      }
      .img::after {
        background: inherit;
        clip-path: circle(0% at 50% 50%);
        transition: all 1s;
      }
      .img:hover::after {
        clip-path: circle(50% at 50% 50%);
      }

js代码

    <div class="img"></div>