默認模糊圖像，懸停時顯示？

Question

我想嵌入使用CSS默認模糊的圖像（源圖像文件不是模糊的）。當用戶懸停在圖像上時，應該顯示它。如果它也有一個動畫，這將是非常棒的。有沒有辦法做到這一點？

Answer 1

CSS filters（MDN參考）可以做到這一點

img { 
 
    -webkit-filter: blur(10px); 
 
    filter: blur(10px); 
 
    -webkit-transition: -webkit-filter .5s linear; 
 
    transition: -webkit-filter .5s linear; 
 
    transition: filter .5s linear; 
 
    transition: filter .5s linear, -webkit-filter .5s linear; 
 
} 
 
img:hover { 
 
    -webkit-filter: blur(0); 
 
    filter: blur(0) 
 
}

<img src="http://www.fillmurray.com/460/300" alt="" />