Css 无法为基础中的块网格设置覆盖DIV_Css_Zurb Foundation

Css 无法为基础中的块网格设置覆盖DIV

css zurb-foundation

Css 无法为基础中的块网格设置覆盖DIV,css,zurb-foundation,Css,Zurb Foundation,嘿，伙计们，我在这个画廊工作。现在我在块网格上设置了缩略图，我在第一个列表项上添加了一个覆盖div，问题是我无法动态设置它，我的意思是100%的宽度和高度，因为图库是响应的，所以我想要的是覆盖应该固定在缩略图上我无法设置小提琴，所以我上传了一个实例。您可以看到覆盖延伸拇指。请提出解决办法谢谢。我需要覆盖每个拇指。这是我的新代码 <style> .thumbsList li { position: relative; } .over

嘿，伙计们，我在这个画廊工作。现在我在块网格上设置了缩略图，我在第一个列表项上添加了一个覆盖div，问题是我无法动态设置它，我的意思是100%的宽度和高度，因为图库是响应的，所以我想要的是覆盖应该固定在缩略图上

我无法设置小提琴，所以我上传了一个实例。您可以看到覆盖延伸拇指。请提出解决办法

谢谢。 我需要覆盖每个拇指。

这是我的新代码

 <style>
    .thumbsList li {
      position: relative;
    }
    .overlay
    {

      position: absolute;
      z-index: 22;
      background-color: black;
      opacity: 0.6;
      height:100%;
      with:100%;
      z-index: 22;
    }  
  </style>

</head>
<body>  



 <div class="row projectsRow">

  <ul class="large-block-grid-3 medium-block-grid-3 small-block-grid-2 thumbsList">
    <li >

      <div class="overlay"></div>
      <img class="projectsThumbs" src="img\projects\1.jpg" alt="">

    </li>
    <li >
      <div class="overlay"></div>
      <img class="projectsThumbs" src="img\projects\2.jpg" alt=""></li>
      <li >
        <div class="overlay"></div>
        <img class="projectsThumbs" src="img\projects\3.jpg" alt=""></li>




      </ul>

    </div>



    <script src="js/jquery.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>

    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>


  </body>
  </html>


李先生{
位置：相对位置；
}
覆盖
{
位置：绝对位置；
z指数：22；
背景色：黑色；
不透明度：0.6；
身高：100%；
有：100%；
z指数：22；
}  








$（document.foundation（）；

给出一个

位置：相对到您的
元素。同时将
标记放在每个
标记内
.thumbsList li {
    position: relative;
}

并将以下代码放在所有
中，而不仅仅是第一个代码
<div class="overlay"></div>


我需要在每个拇指上覆盖，而不是一个简单的覆盖。嘿，说它也不起作用。我们可以在这儿打基础吗？也许我不能正确地设置它。你能给我做一把小提琴吗。如果我将所有位置设置为ablsoute，它将覆盖整个ul。您是否将li
位置更改为relative
？我必须添加一个span（位置：relative
），它将同时包含图像和div
）。这样，div
将与image