HTML・CSS・Javascriptなどのメモブログ│CODE-LIFE

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ。たまにExcelVBAの話もでます。

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