body {
}

.fade-container {
    position: relative;
    width: auto; /* adjust */
    height: auto; /* adjust */
}

.fade-img {
    display: block;
    position:absolute;
    top:300px;
    left: 50%;
    object-fit: cover;
    opacity: 0;
    animation: fadeCycle 15s infinite;
    transform: translate(-50%, -50%)
}

/* First image */
.img1 {
    animation-delay: 0s;
}

/* Second image */
.img2 {
    animation-delay: 5s;
}

.img3 {
    animation-delay: 10s;
}

/* Animation */
@keyframes fadeCycle {
    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }
    /* fade in */
    30% {
        opacity: 1;
    }
    /* visible */
    38% {
        opacity: 0;
    }
    /* fade out */
    100% {
        opacity: 0;
    }
}