覆盖引导山坳全屏信息

我有很多类似下面的代码，我想什么是对点击的DIV下方的DIV随时随地列内更信息隐藏将更改为更信息和整个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的问题是，它没有显示的更多 - 尽管该课程已切换。它隐藏在bootstrap div内某处的图像后面，但我希望它在整个窗口中。和PS我有很多这些上校，所以我不想让更多的信息外，因为我将不得不提供不同类别的所有更多信息

来源

2016-12-10 Vanshaj Behl

如果文本隐藏在图像后面。请尝试使用相对的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>

强大的文本

来源

2016-12-10 07:46:52

覆盖引导山坳全屏信息

回答

相关问题