Example
画像を簡単なCSSでレスポンシブ,キーボードアクセシビリティ対応のポップアップ表示する
WordPress界隈では、画像のポップアップは javascriptを使ったプラグインを利用するのが普通だと思います
画像は、クリックしたりしても:focusや:activeは、使えないためです。CSSだけで実装するLightBoxは、:target 等を使っている例が多いのではないかと思います。
この例は、:target は使わず、よりシンプルに、キーボードアクセシビリティにも対応、レスポンシブデザインにも対応のポップアップビューを実装します。
え、? 動かない! よく見てください。この実装の最大のポイントは、tabindex="0" なんですよ~
img 要素に popup クラスも忘れずに追加してくださーい
リンク付き画像の場合は、リンクに飛んで行ってしまいますので、リンクを無効にするスタイル等と組み合わせた、もうひと手間かけたスタイル設定が必要になります。
You can :focus on a img and :active on a image
HTML
<img src="https://tenman.info/labo/css/files/tutizaki-bay.jpg" alt="test" width="640" height="475" class="popup size-full wp-image-1157" tabindex="0" /> <img src="https://tenman.info/labo/css/files/notre.jpg" alt="test" width="640" height="359" class="popup size-full wp-image-1548" tabindex="0" /> <img src="https://tenman.info/labo/css/files/hasu-sensyu-park.jpg" alt="test" width="640" height="475" class="popup size-full wp-image-1165" tabindex="0" /> <img src="https://tenman.info/labo/css/files/yakeisidake-300x186.jpg" alt="test" width="300" height="186" class="popup size-medium rd-active-effect type-red" tabindex="0" />
CSS
.popup:focus, .popup:active { position: fixed; top:0; left:0; right:0; bottom:0; margin:auto; height: auto; z-index: 100; background: #fff; padding: 20px; outline: 1px solid #aaa; max-width:60vw;/* 画像が大きい場合は、適宜調整 */ } .popup { height: 96px; width:auto; cursor: pointer; display: inline; }
2017・2・28 positionをabsoluteからfixedに変更しました