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

Question

我正在寻找建议,为我的图像悬停重现(见图)效果.我的问题是我的图像很流畅,而且我还没有真正找到关于该主题的任何好的教程以及叠加层.

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

任何人都可以指出我正确的方向,或者提供更好的实施建议？我很失落.

先感谢您.:)

Answer 1

如果图像将被包含在一个定义的宽度股利,你可以绝对定位的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;
}

当然还有小提琴