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

Question

我正在寻找建议，为我的图像悬停重现（see this image）效果。我的问题是我的图像很流畅，而且我还没有找到关于该主题和叠加层的任何好的教程。

我假设我必须创建一个透明的png（白色区域+圆圈），它在悬停时覆盖图像，然后文本覆盖了那个？所有这些都需要根据图像本身进行相应的调整。 此外，顶部边框不是图像的一部分，它是使用CSS生成的，我不希望在可能的情况下覆盖它。

有人可以指出我正确的方向，或者如果有更好的实施方案可以提供建议吗？我很失落。

提前谢谢你。 ：）

Answer 1

如果图像将包含在具有已定义宽度的div中，则可以将包含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应该将叠加和其他一些东西居中。有关垂直和水平居中div的更多信息，请参阅here

.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

Answer 2

只需使用background-color设置透明色：

Demo here

<强> HTML

<div class="overlay">
    <div>Hello</div>
    <span>January 16. 2014</span>
</div>

<强> CSS

.overlay {
    position:relative;
    width:200px;
    height:200px;
    border-radius:50%;
}
.overlay:hover {
    background:rgba(0,0,0,0.5);
}
.overlay > div {
    position:absolute;
    color:#fff;
    font:50px sans-serif;
    width:100%;
    top:33%;
    text-align:center;
}
.overlay > span {
    position:absolute;
    color:#fff;
    font:12px sans-serif;
    width:100%;
    top:67%;
    text-align:center;
}

上部文字边框的点画线可以使用边框底部或单线图像作为背景附加到div。

希望这有帮助。