background transition flash when mouse leave target

Question

I'm trying to animate background property using transition.

When I hover over target it works smooth but when I leave out it makes like flash!

Shouldn't it be smooth in and out?

It looks that mix-blend-mode behind this flashing issue or maybe sth else so I need explanation.

a {
    position:relative;
    display:block;
}

img {
    position:relative;
    width: 172px;
    border-radius:15px;
    float:left;
    margin-bottom:10px;
    filter:grayscale(100%);
}
    
a::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 172px;
    height: 242px;
    background: #2d293e;
    content: " ";
    display: block;
    border-radius: 14px;
    mix-blend-mode: screen;
    transition: opacity 300ms ease-in-out,background 400ms ease-in-out;
}

a:hover::after {
    background:#FF0101;
    opacity:0.1;
}

<a>
    <img src="https://images.wikidi.net/crop/172x242/http://f2.fsm.wikidi.com/af/ad/yb/e0d20df22741de9c3480e691bc7a3a41efceddcd.jpg" alt=""/>
</a>

Answer 1

Try a different transition for the mouse-in and the mouse-out then you will have a better control and you can avoid the flash

a {
  position: relative;
  display: block;
}

img {
  position: relative;
  width: 172px;
  border-radius: 15px;
  float: left;
  margin-bottom: 10px;
  filter: grayscale(100%);
}

a::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 172px;
  height: 242px;
  background: #2d293e;
  content: " ";
  display: block;
  border-radius: 14px;
  mix-blend-mode: screen;
  transition: opacity 400ms  ease-in, background 250ms  ease-in;
}

a:hover::after {
  background: #FF0101;
  opacity: 0.1;
  transition: opacity 250ms ease-in, background 400ms ease-in;
}

<a>
  <img src="https://images.wikidi.net/crop/172x242/http://f2.fsm.wikidi.com/af/ad/yb/e0d20df22741de9c3480e691bc7a3a41efceddcd.jpg" >
</a>