CSSで作ったスライダーにリンクをつけたい

Question

前提・実現したいこと

CSSのみで、ズームしながらふわっと切り替わるスライドショーを作り、それぞれの画像にリンクを貼り付けたいと思っています。が、画像に<a href="">でリンクをつけると上手く作動しなくなってしまい、リンクにも飛びませんでした（画像が全て同時に出てきてしまいます）。
他の方の質問や色々なページを見て試してみてはいるのですがよくわからず、、、ここで質問させていただきました。大変恐縮ですが、アドバイスいただけますと嬉しいです。

該当のソースコード

【CSS】

<style>
	/*スライダー*/
 .main_imgSlide {
    width: 400px;
    height: 550px;
    overflow: hidden;
    position: relative; }
  .main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 680px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; }

    .main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

    .main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

    .main_img:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }

  .main_img {
    opacity: 0;
    width:100%;
    height:100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; }

    .main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

    .main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

    .main_img:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }

@keyframes anime {
    0% {
        opacity: 0; height: auto;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         transform: scale(1.2);
                    z-index:9;
    }
    100% { opacity: 0 }
}

@-webkit-keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         -webkit-transform: scale(1.2);
            z-index:9;
    }
    100% { opacity: 0 }
}
</style>

【HTML】

<div class="main_imgSlide">
    <a href=""><img src="" alt="img" class="main_img"></a>
    <a href=""><img src="" alt="img" class="main_img"></a>
    <a href=""><img src="" alt="img" class="main_img"></a>
    <a href=""><img src="" alt="img" class="main_img"></a>
    <a href=""><img src="" alt="img" class="main_img"></a>
    <a href=""><img src="" alt="img" class="main_img"></a>
 </div>

補足情報（FW/ツールのバージョンなど）

可能であればHTMLとCSSのみで作りたいと思っています。

Comments

[Rieee]

今回次の画像に6秒後に切り替わり、3秒かけてフェードアウトに設定していますが、次の画像に切り替わってから3秒後に画像をクリックすると、一つ前の画像に貼っているリンクに飛んでしまいます。@keyframesで指定している秒数を変えれば改善されるかと思ったのですが、そこを変えても同じ問題が起きてしまいました。別部分の修正が必要でしょうか？初心者のため初歩的な質問で申し訳ありませんが、もし宜しければ教えていただきたいです。

Answer 1

.main_imgに指定していた記述を、追加した<a>と既存の<img>に分散する必要があります。

おおざっぱに、<a>のほうにclass="main_img"を移動して、
<img>には親要素に対しては隙間が出ないようにする記述 (width: 100%;、height: 100%;など) をするのが楽だと思います。

<div class="main_imgSlide">
    <a href="" class="main_img"><img src="" alt="img"></a>
    ...
</div>

position: absolute;を使うときの鉄則として、<a>や<img>などの、いわゆるインライン要素には
display: block;を指定しておくと無難です (理由があればdisplay: flex;も可)。

.main_img {
  display: block;
}
.main_img img {
  display: block;
}

Comments

[Rieee]

早速のご回答ありがとうございます！いただいたアドバイス通り対象箇所を修正しましたら、正常に動作するようになりました！ご丁寧に教えていただき、ありがとうございます！
今回次の画像に6秒後に切り替わり、3秒かけてフェードアウトに設定していますが、次の画像に切り替わってから3秒後に画像をクリックすると、一つ前の画像に貼っているリンクに飛んでしまいます。@keyframesで指定している秒数を変えれば改善されるかと思ったのですが、そこを変えても同じ問題が起きてしまいました。別部分の修正が必要でしょうか？初心者のため初歩的な質問で申し訳ありませんが、もし宜しければ教えていただきたいです。