Lightboxの効果をCSSだけで実装する方法

<div id="sample">
  <a href="#figure"><img src="//picsum.photos/id/237/200" alt=""></a>
  <figure id="figure">
    <a id="overlay" href="#overlay">
      <img src="//picsum.photos/id/237/600" alt="">
      <figcaption>どこかをクリックすると画面をを閉じます</figcaption>
    </a>
  </figure>
</div>

#sample figure{
  margin: 0;     /* マージンの初期化 */
  display: none; /* 最初に画像を隠しておく */
}
#sample figure:target{
  display: block;  /* 画像を表示する */
  position: fixed; /* スクロールしても画像を動かさない */
  top: 0;          /* 画面全体に対して画像を中央に設置する */
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;    /* 画像を一番前に表示する */
}
#sample figure:target #overlay{
  position: absolute;        /* 画像が重なるように */
  top: 0;                    /* 4つを0にして画面全体に広げる */
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;     /* フレックスアイテムの並びを縦にする */
  justify-content: center;    /* 左右中央に設置 */
  align-items: center;        /* 上下中央に設置 */
  background: rgba(255, 255, 255, 0.7); /* 画像を見やすくするため透過の黒背景 */
  text-decoration: none;      /* リンクなので文字に下線など装飾が付かないようにする */
  color: #fff;
}
#sample figure:target img{
  animation: fadein .3s;   /* 0.3秒かけたフェードイン効果 */
}
@keyframes fadein{         /* フェードイン効果の中身 */
  0%{
    transform: scale(0.2);
    opacity: 0.2;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}