Lightbox のような高級感を CSS のみで実現

lightbox 風な動作を CSS のみで実現してみた．(javascript や jQuery を使わないで)
ライトボックスは画像の拡大表示で手軽に高級感を醸し出せるので使っているサイトは結構あると思う．

前回書いた記事は高級感というところまではいっていないので，さらに改造して，中央部分から大きくなるようにアニメーションさせてみた．

前回の「CSS のみでポップアップウィンドウ(レイヤー)を表示する方法」にさらに div などを追加している．
中央付近から大きくするために

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

を使うことができなかったせい．

(2023/2)
スタイルシートで id を使っていたのをやめてクラスを使うようにした．これにより汎用性が上がって，一つのページに複数の画像を置きやすくなった．

Lightbox 風なポップアップウィンドウを CSS だけで実装

最近，コアウェブバイタルの件もあって，なるべく javascript を使わないで何とかならないかと考えている．

そんな時に，あるプログラムを考えている最中にモーダルウィンドウ風なポップアップウィンドウを作る必要が生じて，それは別に javascript で作っているので，ウィンドウも javascript で作ればよかったのだが，なんとなく，CSS で出来るんじゃないかと考えていたら出来たので紹介する．

「lightbox CSS」「ライトボックス CSS」などで検索すると出てくるページで，:target を使っている例があった．これも参考になる．
こちらは :checked を使った方法である．
「CSSのみでの多階層ドロップダウンメニューを作成」や「目のマークでパスワードの表示を切り替える実装方法」などでも同様に checkbox と checked を使って CSS のみで動きのある HTML を実現しているので，こちらも参考にしてもらえばと思う．

さらにこの実装方法ではウィンドウの中をクリックしても閉じないように工夫したところに特長があるが，これは既に書いた「CSS でポップアップウィンドウを実装」と同じ方法で実現している．

実際の動作は以下の写真をクリックして確認してほしい．

×

ヨルノヨ

サンプルコード

使い方

CSS部分(スタイルシート)は流用可能．

複数の画像を置くときは HTML部分の pop1 となっている部分を pop2 など画像毎に名前を変えていく．
これでより簡単に LightBox 風に画像を設定することが出来る．

CSS

<style type="text/css" media="screen">
.overlay {
  position: fixed; /* 背景 */
  background: rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.pop-up {
  display: none;
}
.pop-up:checked + .overlay {
  visibility: visible;
  opacity: 1;
  z-index: 100000;
  background-color: #000000E0;
  width: 100%;
}
.popWindow {
  max-height: 95%;
  max-width: 95%;  
  transform: scale(0.3); /* クリックした直後のサイズ */
  z-index: 100010;
  font-size: 13px;
  line-height: 18px;
  margin: 10px auto;
  padding: 4px 10px;
  text-align: center;
  transition: all 0.5s 0s ease;
  display: flex; /* 中央 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pop-up:checked + .overlay .popWindow {
  transform: scale(1); /* 最終的なサイズ */
  height: 100%;
}
.pbox {
  display: flex; /* 中央 */
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 5px;
  overflow: auto;
}
.popWindow .ptitle {
  font-size: 15px;
  margin: 8px;
  color: #FFF;
}
.popWindow .close {
  position: relative;
  float: right;
  transition: all 5ms;
  font-size: 24px;
  line-height: inherit;
  font-weight: bold;
  text-decoration: none;
  color: #FFF;
  padding: 2px;
}
.popWindow .close:hover {
  color: #06D85F;
}
.pbox::-webkit-scrollbar-track {
  background: none;
}
.pbox::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.pbox::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 5px;
}
.clickable:hover {
  cursor: pointer;
}
@media screen and (max-width: 700px){
  .pop-up:checked + .overlay {
    visibility: hidden;
    opacity: 0;
  }
}
</style>

HTML

複数の画像を置きたい場合は pop1 を別の名前にして複製して作ればよい．
それで一つのページに何個でもポップアップする画像を設置することが出来る．

<input type="checkbox" class="pop-up" id="pop1">
<label id="popupi" for="pop1" class="overlay">
  <label class="popWindow" for="pop1">
    <div class="pbox">
    <label>
      <label class="close clickable" for="pop1">×</label>
      <div class="ptitle"><a href="https://yorunoyo.yokohama/" rel="noopener" target="_blank">ヨルノヨ</a></div><img itemprop="image" loading="lazy" src="/wp/wp-content/uploads/2021/12/yoruunoyo-1024x683.jpg" alt="ヨルノヨ" width="1024" height="683" />
    </label>
    </div>
  </label>
</label>
<div class="c">
  <label for="pop1" class="clickable">
    <img itemprop="image" loading="lazy" src="/wp/wp-content/uploads/2021/12/yoruunoyo-300x200.jpg" alt="ヨルノヨ" width="300" height="200" />
  </label>
</div>

苦労した点

• 中央から大きくなっていくようにする部分
• 画像の縦幅がウィンドウサイズを超えたときにスクロールバーを出すようにした
• 拡大画像を中央にする部分
• 写真やウィンドウの中をクリックしても閉じない部分

試行錯誤の末に出来たので不要なコードが入っているかもしれないが，それは指摘していただけると助かります．