Оверлей внутри бутстрапа col для полноэкранного просмотра

Question

У меня есть много столбцов, таких как следующий код, и я хочу, чтобы щелкнуть в любом месте div ниже div из более-info-hidden, чтобы быть измененным на более-info и всю lorem -ipum отображается в полном окне с красным фоном. мой 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 является то, что он не показывает более- info, хотя класс переключается. он скрыт за изображением где-то внутри бутстрапа div, но я хочу его в целом окне. и PS У меня есть много этих cols, поэтому я не хочу делать больше информации на улице, так как для этого я должен был бы дать разные классы для всех больше - info

Answer 1

если текст скрывается за изображением. попробуйте с относительным свойством 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>

сильный текст