css - 如何在响应式缩略图库中制作：悬停效果

Question

我正在尝试制作:hover类似http://studionudge.com/work的效果。

我有三个缩略图，每个缩略图的宽度为 30%，边距为 5%。由于百分比的原因，我没有固定的宽度，使它工作起来要困难得多。我无法使悬停出现或使文本居中。

那可能吗？

这是我的 HTML：

<div id="thumnails">
  <div class="thumb1">
    <div id="mask">
      <div class="thumb-title"><h3>Project title</h3></div>
    </div>
    <img src="images/work.jpg">
  </div> 
</div><!-- #thumbnails -->

还有我的 CSS：

#thumbnails {
  border-bottom: 1px solid #b2b2b2;
  overflow: hidden;
}

#thumb1 {
  width: 30%;
  height: auto;
  margin-right: 5%;
}

#mask {
  position: absolute;
  background-color: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}

#thumb1:hover #mask {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}

#thumb1 img {
  max-width: 100%;
  height: auto;
}

.thumb-title {
  position: absolute;
  text-align: center;
  margin-top: 150px;
}

Answer 1

将鼠标悬停在遮罩上时，您没有悬停在 thumb1 上，这可能是它不起作用的原因。您所崇敬的网站是如何做到这一点的一个很好的例子。百分比应该不是问题。