基本的なCSSライトボックスの画像の下にキャプションを追加するにはどうすればよいですか？

Question

私は次のコードを使って、CSSだけを使って簡単なライトボックスを表示しています。 （私はJavascriptを使用しないことを好みます）。

.lightbox { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 999; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.8); 
 
} 
 

 
.lightbox img { 
 
    position: fixed !important; 
 
    top: 50% !important; 
 
    transform: translateY(-50%) translateX(-50%); 
 
    width: 70%; 
 
} 
 

 
.lightbox figcaption { 
 
    display: inline; 
 
    position: fixed!important; 
 
    top: 70% !important; 
 
    right: 5%; 
 
    transform: translateX(0%); 
 
    color: white; 
 
} 
 

 
@media (max-width: 500px) { 
 
    .lightbox img { 
 
    width: 90%; 
 
    } 
 
} 
 

 
@media (min-width: 800px) { 
 
    .lightbox img { 
 
    width: 50%; 
 
    } 
 
}

<a href="#img1"><img class="img-thumbnail" src="img/sensei/kieflesson.jpg"></a> 
 
<a href="#_" class="lightbox" id="img1"> 
 
    <figure><img src="img/sensei/kieflesson.jpg"> 
 
    <figcaption>Test22</figcaption> 
 
    </figure> 
 
</a>

私はfigcaptionを使用して画像のすぐ下にキャプションを入れしようとしてきた見ることができるように。私はそれを表示することができましたが、それは反応しません。私はそれが変化する画像サイズで動くようにしたい。

ご協力いただければ幸いです。

Answer 1

position: absoluteを画像とキャプションに使用します。 position: fixedはラッパーで問題ありません。今すぐあなたは位置を置いています：すべてのラッパーと画像にも固定されています。

Answer 2

ありがとうございました。私のコードはやや複雑すぎたようだ。私は次のようにして目的の効果を得ました：

.lightbox { 
    display: none; 
    position: fixed; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: rgba(0, 0, 0, 0.8);} 

.lightbox figure { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width:90%; 
    max-width: 500px;} 

.lightbox img { 
    width:100%;} 

.lightbox figcaption { 
    bottom:0; 
    position:absolute; 
    color:white; 
    width: 100%; 
    max-width: 500px; 
    text-align: right; 
    padding-right: 10px; 
    background: rgba(0, 0, 0, 0.5);}