filter: blur で画像をぼかす

画像をぼかしてみます。

blur 関数

ねこ画像にblur関数でぼかしをかけてみます。
関数への引数はぼかしの半径です。10px でもかなりボケますね。emや%などの相対指定も可能です。

<img class="blur" src="/images/site/cat.svg" title="SVGねこ" />  

/* filterでぼかし */  
.filter-blur {  
  filter: blur(10px);  
}  
.filter-blur:hover {  
  filter: blur(0px);  
}

filter:blur リファレンス

MDN のサイトが参考になります。
blur()

ねこ画像 by 素材 Library.com, Thanks!!