等分した画像が並ぶスプリット型のリンク

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

物や人物の紹介に使えそうな画像リスト型のリンクです。（ゲームの公式HPとかにありそうな）
※サンプル用に0.65倍に縮小しています。

CSSの解説

コードを見る

余計な装飾を省いています。

HTML

<ul class="heros-gallery">
  <li>
    <a href="#">
      <img src="image1">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="image2">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="image3">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="image4">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="image5">
    </a>
  </li>
</ul>

CSS

/*** ギャラリー ***/
.heros-gallery{
  width: 600px; /*任意のサイズ*/
  height: 400px; /*任意のサイズ*/
  display: flex; /*横並び*/
}

/*** 各項目 ***/
.heros-gallery li{
  width: 20%; /*5等分*/
  list-style: none; /*丸を消す*/
}

/*** 各画像 ***/
.heros-gallery li img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /*トリミング*/
}

/* リンクホバー時の画像 */
.heros-gallery li a:hover img{
  filter: brightness(70%); /*明るさを70%に*/
}

ul, li タグを使用してリスト型の画像リンクを作成し、display: flexを使って横並びにしています。
全体のサイズや各項目 li の幅は、使用する画像や枚数に応じて調整してください。（サンプルは縦長画像5枚に最適化させています）

リスト全体 ul
- display: flexで横並びにする
- width と height を任意のサイズに（画面幅にするのもアリだと思います）
各項目 li
- width: 20% で5等分する
- list-style: none でリストの●を削除
各項目の画像
- display: blockでブロック要素に
- width と height を100%にして、親要素 li いっぱいに広げる
- object-fit: coverで画像中央でトリミングする
リンクホバー時の画像 ul li a:hover img
- filter: brightness()で明るさを変更する
- transition は指定しない方がそれっぽくなります

応用CSS

商品紹介のギャラリー風

選択した画像をプレビューとして表示します。商品紹介などに使えそうですね。

仕組みとしては、各リンクに個別の id を指定して、対応したプレビュー用の画像にも同じ id を指定。疑似要素 :target を使用して選択された画像だけを表示しています。

なお、目次などと同じようにクリック毎に履歴が溜まり、ブラウザバックに支障をきたすので注意してください。

コードを見る

余計な装飾を省いています。

HTML

<!-- プレビュー -->
<div class="pre-box">
  <img id="pre1" src="img1">
  <img id="pre2" src="img2">
  <img id="pre3" src="img3">
  <img id="pre4" src="img4">
  <img id="pre5" src="img5">
</div>

<!-- リスト -->
<ul class="split-list">
  <li>
    <a href="#pre1">
      <img src="img1">
    </a>
  </li>
  <li>
    <a href="#pre2">
      <img src="img2">
    </a>
  </li>
  <li>
    <a href="#pre3">
      <img src="img3">
    </a>
  </li>
  <li>
    <a href="#pre4">
      <img src="img4">
    </a>
  </li>
  <li>
    <a href="#pre5">
      <img src="img5>
    </a>
  </li>
</ul>

CSS

/*** リスト ***/
.split-list{
  width: 240px; /*任意のサイズ*/
  height: 60px; /*任意のサイズ*/
  display: flex; /*横並び*/
  padding-left: 0;
  margin: 0 auto;
}

/*** リストの各項目 ***/
.split-list li{
  width: 20%; /*5等分*/
  list-style: none; /*丸を消す*/
}

/*** 各画像 ***/
.split-list li img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /*中央でトリミング*/
}

/*** リンクホバー時の画像 ***/
.split-list li a:hover img{
  filter: brightness(70%); /*明るさを70%に*/
}


/***** プレビュー *****/
.pre-box{
  position: relative;
  width: 240px;
  height: 360px;
  border: 0.3px solid #000;
  margin: 0.5rem auto;
}
/* サンプルの文字 */
.pre-box:before{
  content: "Sample";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  color: rgba(150,150,150,50%);
}

/** プレビュー画像 **/
.pre-box img{
  display: none; /*通常時は非表示*/
}
/* 画像へのリンクがクリックされたら */
.pre-box img:target{
  display: block; /*表示*/
  width: 100%;
  height: 100%;
  object-fit: contain; /*全体が収まるよう縮小*/
}