CSS filter greyscale removes pseudo element overlay-CodePudding

I have a background image which on hover I want to greyscale and overlay a soft light color correction. I have my overlay as a pseudo element which should appear over the top of the greyscale background image on hover. However, with the rule filter: grayscale(100%) contrast(1); the pseudo element is not displayed. Is this a CSS bug?

HTML

<div >
  <div >
      <div  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;
}

CodePudding user response：

Try to remove opacity:

.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 >
  <div >
      <div  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>

CodePudding user response：

Not a CSS bug.

You're using position: absolute; which is displaying over your element. You can do z-index: 99999 or z-index: -99999 adjustments to make your element displaying above/bellow an element.