在悬停时收缩半透明覆盖层

Question

我想用这个链接中存在的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>