悬停信息div背景与父div相同的大小

Question

我正在使用Zurb Foundation。当光标悬停在网格中的一个DIV上时，信息DIV应显示在顶部，使背景图像更暗，以便用户可以更轻松地查看文本。

Foundation具有列的默认填充。因此，信息div背景上的position:absolute; width:100%使其大于项目分区。

代码：

<div class="row">
  <div class="large-4 columns"> 
    <div style="position:absolute; width:100%; height:100%;...">Tommy...</div>
    <img src=".." style="width:100%; height:100%">
  </div>
</div>

这应该是这样的：

现在看起来像这样：

Answer 1

您可以在列中添加包装<div>以包含<img>和绝对定位的<div>。因此，叠加层将与列的内容框相关，而不是 padding-box 。

.overlay-container { position: relative; display: inline-block; }

.overlay {
  visibility: hidden;
  opacity: 0;

  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;

  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 1.2rem;

  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.overlay-container:hover .overlay {
  visibility: visible;
  opacity: 1;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css" rel="stylesheet" type="text/css" />
<div class="row">
  <div class="large-4 columns">

    <div class="overlay-container">
      <img src="http://lorempixel.com/400/200" />
      <div class="overlay">Overlay text</div>
    </div>

  </div>
</div>

Answer 2

所以我错过了一个简单的事情 - 将另外一个div放入列中解决了这个问题，因为新的div可以没有填充，所以它的100％宽度，对于父div，对于info div是可以的也。这是代码：

<div class="row">
  <div class="large-4 columns"> 
    <div>
      <div style="position:absolute; width:100%; height:100%;...">Tommy...</div>
      <img src=".." style="width:100%; height:100%">
    </div>
  </div>
</div>