悬停时收缩半透明覆盖

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>