懸停時收縮半透明覆蓋

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>