html - 悬停时缩小半透明覆盖

Question

我想使用此 link 中存在的 CSS3 创建此效果.

在这个页面中，有四个圆形的图片，效果很漂亮很高级。其效果是图像上方的半透明叠加层在图像悬停时移动/缩小。最初，图像是透明的(没有覆盖层)，当悬停过渡完成时，图像获得半透明覆盖层。

Answer 1

如果您正在寻找将鼠标悬停在带有图像的圆圈上时显示的效果，则可以通过使用 box-shadow 和如下代码段所示的伪元素来实现。

伪元素有一个box-shadow，它的扩展半径等于容器的大小，以便在元素上产生半透明覆盖。伪元素的初始大小与容器的大小相同，由于这个和父级上的 overflow: hidden，阴影是不可见的。当悬停在图像上时，伪元素的高度和宽度会慢慢过渡到 0px，这使得框阴影变得可见(因此最终显示透明覆盖)。

translateX(-50%) translateY(-50%) 变换效果用于将伪元素定位在容器元素的中心点。

div {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background: url(http://lorempixel.com/200/200/nature/1);
  overflow: hidden;
}
div:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%) translateY(-50%);
  transition: all 1s;
}
div:hover:after {
  height: 0%;
  width: 0%;
}

<div class='shadow-circle'></div>