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上，这可能是它无法正常工作的原因。您所感想到的网站就是如何做到这一点的一个很好的例子。百分比应该不是问题。

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

1 个答案: