CSS滤镜灰度去除伪元素覆盖

Question

我有一个背景图像，在悬停时我想要灰度并覆盖柔和的灯光颜色校正。我将叠加层作为伪元素，在悬停时应该出现在灰度背景图像的顶部。但是，使用规则filter: grayscale(100%) contrast(1); 不会显示伪元素。这是 CSS 错误吗？

HTML

<div class="item-block">
  <div class="bg-wrapper">
      <div class="bg" style="background-image: url('https://res.cloudinary.com/ho5waxsnl/image/upload/c_fill,f_auto,h_540,q_auto,w_960/yl3h7wm8jdcw7zn95jdjg4ll5owh');"></div>
  </div>
</div> 

CSS

.bg-wrapper .bg:after{
  content: '';
  transition: all .3s ease 0s;
  width: 2000px;
  height: 2000px;
  top: calc(50% - 1000px);
  left: calc(50% - 1000px);
  position: absolute;
  opacity: 0;
  -webkit-transition-duration: 3s;
  -o-transition-duration: 3s;
  transition-duration: 3s;
  background-color: #0e79b2;
  mix-blend-mode: lighten;
}

.bg-wrapper .bg{
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transition-duration: 3s;
}

.bg-wrapper{
  height: 500px;
  transition: all .3s ease 0s;
  overflow: hidden;
}

.item-block:hover .bg{
  transform: scale(1.1);
  filter: grayscale(100%) contrast(1);
}

.item-block:hover .bg:after{
  opacity: 1;
} 

Answer 1

尝试去除不透明度：

.bg-wrapper .bg:after{
  content: '';
  transition: all .3s ease 0s;
  width: 2000px;
  height: 2000px;
  top: calc(50% - 1000px);
  left: calc(50% - 1000px);
  position: absolute;
  opacity: 0;
  -webkit-transition-duration: 3s;
  -o-transition-duration: 3s;
  transition-duration: 3s;
  background-color: #0e79b2;
  mix-blend-mode: lighten;
  filter: grayscale(100%) contrast(1);
}

.bg-wrapper .bg{
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transition-duration: 3s;
}

.bg-wrapper{
  height: 500px;
  transition: all .3s ease 0s;
  overflow: hidden;
}
.bg-wrapper:hover .bg:after{
  opacity: 1;
}

<div class="item-block">
  <div class="bg-wrapper">
      <div class="bg" style="background-image: url('https://res.cloudinary.com/ho5waxsnl/image/upload/c_fill,f_auto,h_540,q_auto,w_960/yl3h7wm8jdcw7zn95jdjg4ll5owh');"></div>
  </div>
</div>