悬停时缩小半透明覆盖

Question

我想用 link 中存在的 CSS3 创建这种效果。

在这个页面中，有四个圆形的图片，效果很漂亮很高级。效果是 半透明叠加在图像上方 moves/shrinks 当图像悬停时 。最初，图像是透明的（没有覆盖），当悬停过渡完成时，图像获得半透明覆盖。

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>

悬停时缩小半透明覆盖

Shrinking semi-transparent overlay on hover

html

css

css-transitions

css-shapes