CSSのみで作られたフェード式スライドショーの各画像にそれぞれリンクをつけたい

https://peonyqueen.wordpress.com/2016/03/04/css_slider/
こちらで紹介されているフェード式スライドショーの各画像にリンクを付けたいです。

<style>
.slider{
    width:1000px;
    height:400px;
    margin:0 auto;
    position:relative;
}
.slider ul{
    margin:0;
    padding:0;
    list-style:none;
}
.slider ul li{
    width:1000px;
    height:400px;
    position:absolute;
    top:0;
    left:0;
    animation-iteration-count:infinite;
    animation-duration:24s;
}

@keyframes slider{
    0%{
        opacity:0;
    }
    20.83%{
        opacity:1;
    }
    33.33%{
        opacity:1;
    }
    45.83%{
        opacity:0;
    }
    100%{
        opacity:0;
    }   
}

</style>

<div class="slider">
    <ul>
        <li><a href="01.htm"><img src="01.jpg" ></a></li>
        <li><a href="02.htm"><img src="02.jpg" ></a></li>
        <li><a href="03.htm"><img src="03.jpg" ></a></li>
    </ul>
</div>

このようにしましたが、1枚目・2枚目の画像にも3枚目用のリンクがかかってしまい、うまくいきません。
li全体にリンクを貼ってみましたが、結果は同じでした。
それぞれの画像に別のリンクを張る方法について、CSSのみで解決できる方法があれば教えていただきたいと思って投稿しました。
よろしくお願いします。

m.ts10806

2018/08/01 01:16

そもそも現在のコードだけでは3枚目のみ表示されて動かずスライドになっていないように思うのですが（Chromeで確認）コードは本当にこれで全てですか？

goun

2018/08/01 01:20

大変失礼しました。修正いたしました。引き続きよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

リンク先に肝心のアニメーション用コードがありますが、それを記述してくれないと回答しづらいです。

本題ですが、画像は重なっていて常に３番目のリンクが一番上に来ています。
それをopacity(透明度)の変化によって表示させているだけなので、このままでは３番目のリンクしかクリックできません。

keyframeのプロパティでopacityのほかにz-indexできちんと表示されている画像を一番上に来るように設定する事で対応できるかと思います。

css
1@keyframes slider{
2    0%{
3        opacity:0;
4        z-index: -1;
5    }
6    20.83%{
7        opacity:1;
8        z-index: 999;
9    }
10    33.33%{
11        opacity:1;
12        z-index: 999;
13    }
14    45.83%{
15        opacity:0;
16        z-index: -1;
17    }
18    100%{
19        opacity:0;
20        z-index: -1;
21     }   
22}