html - 如何使用 CSS 在悬停时创建此透明图像叠加层？

Question

我正在寻找重现 ( see this image ) 图像悬停效果的建议。我的问题是我的图像是流畅的，而且我还没有真正找到任何关于该主题与叠加相结合的好教程。

我假设我必须创建一个透明的 png(白色区域 + 圆圈)，它在悬停时覆盖图像，然后覆盖它的文本？这一切都需要根据图像本身相应地调整大小。 此外，上边框不是图像的一部分，它是用 CSS 生成的，如果可能的话我不希望它被覆盖。

谁能给我指明正确的方向，或者如果有更好的实现方式可以提出建议？我有点迷路了。

提前致谢。 :)

Answer 1

如果图像将包含在具有已定义宽度的 div 中，您可以将绝对定位的 div 添加到包含将充当叠加层的 div 的那个。 假设此代码段并且叠加层的不透明度设置为零

<div class="picholder">
    <img class="fancypics" src=http://placehold.it/500x650></img>
    <div class="overlay"><p class="text_box">Hello World!</p></div>
</div>

悬停效果的CSS是

.picholder:hover .overlay{opacity:1;}
.picholder:hover .fancypics{opacity:0.7;}

这应该会产生悬停效果，我相信您会想要的。下面的 css 应该将叠加层和其他一些东西居中。见here有关垂直和水平居中 div 的更多信息

.overlay {
  bottom: 0;left: 0; top: 0; right: 0;
  height: 150px;
  width: 150px;
  margin: auto;
  position: absolute;
  background-color:#3f3f3f;
  border-radius: 50%;
  opacity:0;
}
.fancypics{width:100%;}
.text_box{
  color:white;
  weight:bold;
  font-size:2em;
  padding:10px;
  padding-bottom:50%;
  text-align:center;
}

当然还有 fiddle