2枚のリンク付き画像をフェードのアニメーションで表示したいが、2枚とも同じURLに飛んでしまう

前提・実現したいこと

HTML5とCSSでスマートフォン向けのページを作っています。

#####2枚のリンク付き画像をフェードのアニメーションで表示したいのですが、1枚目も2枚目も、2枚目に設定したURLに飛んでしまいます。

他の方の質問で、
画像が重なっているからどちらかの画像が常に上にあって、その画像に設定したリンクに飛ぶ
だから、高さを設定しなければいけない　ということはわかったのですが
いざ自分のコードに反映させるとうまく動作しません(画像自体が表示されなくなってしまう)

初心者のつたない質問で申し訳ございませんが、ご教授いただければ幸いです。
よろしくお願いいたします。

該当のソースコード

HTML
1    <div class="slide" id="makeImg">
2        <a href="https://example1"><img src="img1.png" alt=""></a>
3        <a href="https://example2"><img src="img2.png" alt=""></a>
4    </div>

CSS
1.slide {
2  position   : relative;
3  overflow   : hidden;
4  width      : 950px;
5  height     : 300px;
6  margin     : auto;   
7}
8 
9.slide a{
10  display    : block;
11  position   : absolute;
12  animation  : slideAnime 8s ease infinite;
13}
14
15.slide img{
16    width: 100%;
17    height: 100%;
18}
19 
20 /* スライドのアニメーションを段差で開始する*/
21.slide a:nth-of-type(1) { animation-delay: 0s }
22.slide a:nth-of-type(2) { animation-delay: 4s }
23 
24 /*スライドのアニメーション*/
25@keyframes slideAnime{
26   0% { opacity: 0}
27   25% { opacity: 1 }
28  50% { opacity: 1 }
29  75% { opacity: 0 }
30 100% { opacity: 0 }
31}
32