Html 悬停时缩小半透明覆盖

我想用CSS3创建这个效果，CSS3存在于这个场景中

---

在本页中，有四个圆形图像，具有美丽和先进的效果。其效果是在图像顶部有一个半透明覆盖层，当图像悬停时，该覆盖层会向内移动/收缩。最初，图像是透明的（没有覆盖）当鼠标悬停过渡完成时，图像将获得半透明覆盖。

如果您正在寻找鼠标悬停在带有图像的圆圈上时显示的效果，则可以使用

框阴影和伪元素（如下面的代码片段所示）来实现

伪元素有一个扩展半径等于容器大小的
框阴影
，以便在元素上生成半透明覆盖。最初，伪元素的大小与容器的大小相同，由于这一点以及父元素上的
溢出：hidden
，阴影是不可见的。在图像上悬停时，伪元素的高度和宽度缓慢转换为0px，这使长方体阴影变得可见（从而最终显示一个透明覆盖）

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


div{
位置：相对位置；
高度：200px；
宽度：200px；
边界半径：50%；
背景：url(http://lorempixel.com/200/200/nature/1);
溢出：隐藏；
}
部门：之后{
位置：绝对位置；
内容：''；
最高：50%；
左：50%；
身高：100%；
宽度：100%；
边界半径：50%；
盒子阴影：0px 0px 0px 200px rgba（0,0,0,0.5）；
转化：translateX（-50%）translateY（-50%）；
过渡：所有1；
}
div:悬停：之后{
身高：0%；
宽度：0%；
}