[英]How do I create this transparent image overlay on hover with CSS?
我正在寻找建议,为我的图像悬停重现( 见图 )效果。 我的问题是我的图像很流畅,而且我还没有真正找到关于该主题的任何好的教程以及叠加层。
我假设我必须创建一个透明的png(白色区域+圆圈),它在悬停时覆盖图像,然后文本覆盖了那个? 所有这些都需要根据图像本身进行相应的调整。 此外,顶部边框不是图像的一部分,它是用CSS生成的,我不希望在可能的情况下覆盖它。
任何人都可以指出我正确的方向,或者提供更好的实施建议? 我很失落。
先感谢您。 :)
如果图像将包含在具有已定义宽度的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的更多信息,请参阅此处
.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;
}
当然还有小提琴
只需使用背景色设置透明色:
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的背景附加。
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.