Question

我有很多列，如下面的代码和我想要的是点击更多信息隐藏的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中的问题是虽然该类被切换，但它没有显示更多信息。它隐藏在引导div内某处的图像后面，但我希望它在整个窗口中。和PS我有很多这些cols所以我不想在外面制作更多的信息，因为我必须给所有更多信息提供不同的类

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>

强文

在bootstrap col内叠加全屏信息

1 个答案: