デフォルトでぼかし画像が表示されます。

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="" />

を行うことができます