Overlay an image currently occupied with an flex box

Question

I am currently trying to overlay an old image with an new image, the image is currently occupied using flex box, and if I try to put an image on the same overlay position , I end up having some of the old image and the new image occupying the space..

How the image styling is thus:

  &__image {
    flex: 8;
    height: rem(280);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    order: 1;
    overflow: hidden;


    @include mq($from: s-screen) {
      height: 100%;
      order: 2;
      width: 67%;
    }
  }

and the overlay styling:

  &__overlay {
    opacity: 0;
    flex: 8;
    height: rem(280);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    order: 1;
    transition: opacity 2000ms ease-in;

    @include mq($from: s-screen) {
      height: 100%;
      order: 2;
      width: 67%;
    }
  }

this is not quite the same...The overlay works, i am not able to overlay on top of a flexbox