How to set animation to two child elements?

Question

css

<div class="img-wrapper">
   <img src="img/1.jpg" alt="">
 </div>

.img-wrapper
  position: relative
  margin: 50px auto
  width: 250px
  height: 450px
  border: 2px solid brown
  overflow: hidden
  img
    width: 100%
    height: 100%
    object-fit: cover
    transition: .2s all
  &:hover
    &::before
      background-color: transparentize(black, 1)
    img
      transform: scale(1.05)
  &::before
    content: ''
    position: absolute
    width: 100%
    height: 100%
    background-color: transparentize(black, 0.5)
    transition: .2s all

When setting a transition to the img and before elements, the animation fires only on the img, and ::before fires instantly, and at the end of the animation, the img also instantly returns to its original state. How do I make hover animations of two objects work?

Answer 1

https://codepen.io/casufi/pen/QWwxKGE