在这种情况下，答案是显而易见的。
你在所有的.fade-slider-1>div上都使用了position: absolute，所以所有的框都互相重叠，所以最后一个框位于所有框的顶部。

添加一个z-index应该可以如下解决这个问题：

.fade-slider-1 {
  width: 250px;
  height: 250px;
  overflow: hidden;
  box-sizing: border-box;
  white-space: nowrap;
  /* position: relative; For Left Align - margin: 0 auto; For Center Align */
  /*position: relative;*/
  margin: 0 auto;
}

.fade-slider-1>div {
  position: absolute;
  animation: move_slide2 16s infinite;
  opacity: 0;
  z-index: 0;
}

.fade-slider-1>div:nth-child(1) {
  animation-delay: 0;
}

.fade-slider-1>div:nth-child(2) {
  animation-delay: 4s;
}

.fade-slider-1>div:nth-child(3) {
  animation-delay: 8s;
}

.fade-slider-1>div:nth-child(4) {
  animation-delay: 12s;
}

@keyframes move_slide2 {
  25% {
    opacity: 1;
    z-index: 5;
  }
  40% {
    opacity: 0;
    z-index: 0;
  }
}

<div class="fade-slider-1">

  <div>
    <a href="https://Metager.org" target="_blank"><img src="https://place-hold.it/250x250/C0C0C0/4169E1.png&text=Image-01&bold&fontsize=30" alt="IMAGE 1" title="IMAGE 1"></a>
  </div>

  <div>
    <a href="https://Quant.com" target="_blank"><img src="https://place-hold.it/250x250/C0C0C0/663399.png&text=Image-02&bold&fontsize=30" alt="IMAGE 2" title="IMAGE 2"></a>
  </div>

  <div>
    <a href="https://search.Brave.com" target="_blank"><img src="https://place-hold.it/250x250/C0C0C0/4169E1.png&text=Image-03&bold&fontsize=30" alt="IMAGE 3" title="IMAGE 3"></a>
  </div>

  <div>
    <a href="https://StartPage.com" target="_blank"><img src="https://place-hold.it/250x250/C0C0C0/663399.png&text=Image-04&bold&fontsize=30s" alt="IMAGE 4" title="IMAGE 4"></a>
  </div>

</div>