Crossfade square image

crossfade.scss

.image__wrapper {
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
    padding: 50%;
    img {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      opacity: 0;
      transition: opacity 300ms ease-in;
      transition-delay: 150ms;
      &.active {
        opacity: 1;
        transition: opacity 300ms ease-in;
        transition-delay: 0ms;
      }
    }