.image-top{
    opacity: 0.1; 
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: change-img-anim 15s infinite;
  background-position: top;
}
.image-top:nth-of-type(1) {
  animation: change-img-anim-first 15s infinite;
  animation-delay: 0s;
}
.image-top:nth-of-type(2) {
  animation-delay: 7s;
}


@keyframes change-img-anim-first {
  0%{ opacity: 0;}
  30%{ opacity: 0.3}
  45%{ opacity: 0.4;}
  100%{ opacity: 0;}
}
@keyframes change-img-anim {
  0%{ opacity: 0;}
  30%{ opacity: 0.3;}
  36%{ opacity: 0.4;}
  45%{ opacity: 0.5;}
  100%{ opacity: 0;}
}