【问题标题】：How do I create this transparent image overlay on hover with CSS?如何使用 CSS 在悬停时创建此透明图像叠加层？
【发布时间】：2014-01-17 13:54:30
【问题描述】：

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

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

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

提前谢谢你。 :)

【问题讨论】：

你能用你尝试过的代码做一个小提琴（jsfiddle.net）吗
w3schools.com/css/css_image_transparency.asp,impressivewebs.com/…
你的意思是这样的吗？ jsfiddle.net/YFJh7 - PS：一个。更改图像，b。我不拥有这些图像。
这是你想要的我希望..jsfiddle.net/yUbV9/3

标签： html css image overlay transparent

【解决方案1】：

如果图像将包含在具有定义宽度的 div 中，您可以将绝对定位的 div 添加到包含将用作叠加层的 div 中。假设这个 sn-p 并且覆盖层的不透明度设置为零

<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

【讨论】：

谢谢，这正是我所需要的！我对其进行了一些更改以满足我的需要，并且效果很好。 :)

【解决方案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 来实现。

希望这会有所帮助。

【讨论】：