:targetを使ったLightbox UIの実装

画像をクリックすると拡大表示される機能をLightboxと呼ぶ。:target擬似クラスを使うことで、JavaScriptなしでも実装できる。

<a href="#image1">
  <span>画像1を開く</span>
  <img src="..." alt="サンプル">
</a>

<section id="image1" class="lightbox">
  <figure>
    <a href="#">閉じる</a>
    <img src="..." alt="サンプル">
    <figcaption>Lerem ipsum</figcaption>
  </figure>
</section>

.lightbox {
  display: none;
}
.lightbox:target {
  display: block;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

デモ

画像を開く

閉じる