Html 如何使用 CSS 在悬停时创建此透明图像叠加层？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21177880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I create this transparent image overlay on hover with CSS?
提问by Lin
I'm looking for advice to reproduce (see this image) effect for my image hovers. My problem is that my images are fluid, and I haven't really been able to find any good tutorials on that subject combined with overlays.
我正在寻找建议来重现（见这张图片）我的图像悬停效果。我的问题是我的图像很流畅，而且我真的无法找到关于该主题的任何好的教程以及叠加。
I'm assuming I have to create a transparent png (white area + circle) which overlays the image on hover, and then the text overlaying that? And it all needs to resize accordingly with the image itself. Also, the top border is not part of the image, it's generated with CSS, and I don't want that to be overlayed if possible.
我假设我必须创建一个透明的 png（白色区域 + 圆圈），它在悬停时覆盖图像，然后文本覆盖它？这一切都需要根据图像本身相应地调整大小。此外，顶部边框不是图像的一部分，它是用 CSS 生成的，如果可能的话，我不希望它被覆盖。
Could anyone kindly point me in the right direction, or give advice if there's a better implementation? I'm rather lost.
任何人都可以指出我正确的方向，或者如果有更好的实施方式可以提供建议吗？我比较失落。
Thank you in advance. :)
先感谢您。:)
回答by Olumide
If the image is going to be contained in a div with a defined width, you can add an absolutely positioned div to that containing div that'll act as the overlay. Assuming this snippet and that the opacity of the overlay is set to zero
如果图像将包含在具有定义宽度的 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>
the css for the hover effect would be
悬停效果的 css 将是
.picholder:hover .overlay{opacity:1;}
.picholder:hover .fancypics{opacity:0.7;}
That should create the hover effect, I believe you're going for. The following css should center the overlay and some other stuff. see herefor more on centering divs vertically and horizontally
这应该会产生悬停效果，我相信你会这样做。下面的 css 应该将叠加层和其他一些东西居中。有关垂直和水平居中 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;
}
and of course the fiddle
当然还有小提琴
回答by Lin
Just use background-color to set a transparent color:
只需使用 background-color 设置透明颜色：
Demo here
演示在这里
HTML
HTML
<div class="overlay">
<div>Hello</div>
<span>January 16. 2014</span>
</div>
CSS
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;
}
The stippled line at the border of the upper text can be achieved using either a border-bottom or a single-line image which you attach as background to the div.
可以使用边框底部或作为背景附加到 div 的单行图像来实现上部文本边框处的点状线。
Hope this helps.
希望这可以帮助。
