See the Pen CSSで画像をぼかしてオンマウスした画像だけ鮮明に by maru (@maru0014) on CodePen.
img { width:30%; -webkit-filter: blur(2px); filter: blur(2px); }
filter
プロパティはその名のとおり画像にフィルターをかけることができます。
これを使って画像をぼかして、hover時に通常表示に直しています。
グレースケール→カラーも可能です。
img { width:30%; -webkit-filter: grayscale(100%); filter: grayscale(100%); } img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
その他にも色々なエフェクトがかけれる! ↓こちらが参考になります。