CSS过滤器灰度删除伪元素覆盖

我有一个背景图像,在悬停状态下,我想灰度化,并覆盖一个柔和的灯光颜色校正。我的叠加是一个伪元素,应该出现在悬停时灰度背景图像的顶部。然而,按照规则 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;
}