Question

我正在使用Foundation框架，我有一个大块网格4组图像，我想有一个div作为标题来覆盖li标签内的整个图像，我做了我的CSS和html，但由于容器的宽度根据屏幕大小而变化，我无法让div始终适合li 这是我想要做的功能的一个例子。 http://procreate.si HTML

 <div class="row">
 <div class="large-12 columns">
 <ul class="large-block-grid-4">
 <li>
 <div class="overlay"></div>
 <a href="#">
  <img src="http://placehold.it/290X290" />   
</a></li>
<li><a href="#"><img src="http://placehold.it/290X290" /></a></li>
<li><a href="#"><img src="http://placehold.it/290X290" /></a></li>
<li><a href="#"><img src="http://placehold.it/290X290" /></a></li>
 </ul>
</div>
    </div>

和CSS

      .overlay {
background:#000;
 opacity: 0.8;
 height: 100%;
 position: absolute;
 width: 100%;
-webkit-transition: opacity 0.9s;
-moz-transition: opacity 0.9s;
-ms-transition: opacity 0.9s;
-o-transition: opacity 0.9s;
transition: opacity 0.9s;
   }
     .overlay:hover {
   opacity: 1.0


    }

标题div占用ul的整个宽度，这不是我想要的，这是什么解决方案？非常感谢

如何在液体容器上制作叠加标题

0 个答案: