JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div id="card">
  <div id="bg-effect"></div>
</div>

CSS

/* 可以删除 */
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#card {
  width: 400px;
  height: 600px;
  background: url("https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/img克鲁赛德战记－Ａ.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(1);

  &:hover {
    filter: grayscale(0);
  }
}

#bg-effect {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/img克鲁赛德战记－Ｂ.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: brightness(1.1);

  &::after {
    content: "";
    display: none;
    position: absolute;
    inset: 0;
    background: url("https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgbg.gif");
    background-position: center;
    mix-blend-mode: color-dodge;
  }

  &:hover::after {
    display: block;
  }
}