javascript - 如何为圆形图像做 50% 悬停叠加效果

Question

我的网站有一个功能，当用户将鼠标悬停在他/她的显示图片上时，会出现一个叠加层。

但遗憾的是我希望叠加层不要覆盖整张照片。我希望它只是圆的一半。

我曾尝试研究解决方案，但似乎找不到任何解决方案。

这是我希望它看起来像的图片。

提前致谢。

如果您能指导我如何实现这种效果，我将不胜感激。

Answer 1

诀窍是，将 overflow:hidden 添加到容器(圆圈)并使覆盖层为圆圈高度的一半。这是一个示例代码:

#circle{
  width:200px;
  height:200px;
  border-radius:50%;
  background-color:#0098dd;
  position:relative;
  overflow:hidden;
}

#overlay{
  display:none;
  position:absolute;
  bottom:0;
  text-align:center;
  width:200px;
  height:100px; /* Half of the container */
  line-height:100px;
  background-color:rgba(255,255,255,0.5);
}
#circle:hover #overlay{
  display:block;
}

<div id="circle">
  <div id="overlay">
    Test
  </div>
</div>