フルスクリーン情報のブートストラップcolのオーバーレイ

Question

私は次のコードのような列がたくさんあり、divの下のdivの下にあるdivの下をクリックするとmore-info-hiddenに変更され、lorem全体に変更されます-ipsumは、ウィンドウ全体に赤い背景で表示されます。私のHTMLは以下の通りですが、私は主にCSSの助けが必要です。

<div class="col-lg-3 col-md-4 col-sm-12"> 
    <figure class="effect-zoe"> 
     <img src="img/alisha.jpg" alt="img26"/> 
     <figcaption> 
      <h2>Alisha <span>Abdulah</span></h2> 
      <p class="description">PIONEER OF FEMALE CAR AND BIKE RACING IN INDIA AND THE WORLD</p> 
     </figcaption>   
     <div class="more-info-hidden"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin urna ligula, hendrerit sed enim non, faucibus sagittis felis. Pellentesque vehicula orci sit amet efficitur bibendum. Duis velit lorem, aliquam non augue eu, lacinia cursus ex. Etiam aliquam commodo tempus. Suspendisse potenti. Curabitur blandit quam dolor, in facilisis quam feugiat eu. Maecenas leo libero, pretium eget arcu in, blandit rhoncus massa. Phasellus sit amet gravida sem. Nulla sit amet tincidunt nisi, et imperdiet nunc. Cras eu turpis ullamcorper, lobortis nisi sit amet, auctor est. In suscipit ornare enim rhoncus sollicitudin. Vivamus metus lectus, blandit non nibh vitae, tempor aliquam elit. 
      </p> 
     </div> 
    </figure> 
</div> 

次のように私のコードのjavascriptのは次のとおりです。

$('.effect-zoe').click(function(){ 


     var modal = $(this).children(".more-info-hidden"); 
     modal.toggleClass("more-info-hidden"); 
     modal.toggleClass("more-info"); 

    }); 

とCSSは次のようになります。

.more-info-hidden{ 
    display: none; 
} 
.more-info{ 
    display: block; 
    height: 100vh; 
    width:100vh; 
    background-color: #e62b1e; 
} 

このCSSの問題は、それがmore-を示していないことですクラスは切り替えられていますが、情報です。それはブートストラップdiv内のどこかのイメージの後ろに隠されていますが、私はウィンドウ全体でそれを望みます。私は、テキストが画像の後ろに隠れている場合は、すべてのより多くのインフォ

Answer 1

に異なるクラスを与えなければならないことのためとして外部より-情報を作りたいいけないので とPS私は、これらのCOLSをたくさん持っています。相対的なCSSプロパティで試してください。

例：

.image { 
 
    position: relative; 
 
    width: 100%; /* for IE 6 */ 
 
} 
 

 
h2 { 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 0; 
 
    width: 100%; 
 
}

<div class="image"> 
 

 
    <img src="images/3754004820_91a5c238a0.jpg" alt="" /> 
 
     
 
    <h2>A Movie in the Park:<br />Kung Fu Panda</h2> 
 

 
</div>

強いテキスト