自動化厨のプログラミングメモブログ │ CODE:LIFE

Python/ExcelVBA/JavaScript/Raspberry Piなどで色んなことを自動化

CSSで画像をぼかしてオンマウスした画像だけ鮮明に

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%);
}

その他にも色々なエフェクトがかけれる! ↓こちらが参考になります。

qiita.com