ネタバレ注意画像を貼るときにCSSだけでぼかして表示する

ページを読み込んだ初期状態ではボケボケ画像にしか見えないけど、マウスオーバーしたときだけクリアに表示される、という効果をCSSで作ります。

昆虫画像や怪我した患部の写真、ネタバレ画像など、多少見る人を選ぶような画像を表示させるときにどうぞ。

共通設定

【HTML】
<div class="wrapper"><img></div>


まず画像の外側をDIVで囲います。

img に直接指定しても動くことは動くのですが、そのままだと ぼかした端っこがガタガタになります。トリミングすると仕上がりがキレイ。

【CSS】
.wrapper {
display: inline-block;
overflow: hidden;
}


フィルタ効果についてはブラウザ間の差異があります。動作環境は随時チェックして下さい。
blur : Can I use…

ぼかし（ブラー）効果

画像をぼややんとさせます。作動時間は0.3秒くらいの設定を良く見かけますが、短めの方がキビキビしてて個人的には好みです。

デモ

画像にマウスオーバーするか、モバイルならタップして下さい。ちなみに画像はアゲハチョウです（控えめな表現）。

ブラー効果を調整したいときは blur(○px); 部分を、時間を調整したいときは transition 属性を調整します。

CSS

【CSS】
.blur img {
-webkit-filter: blur(16px);
filter: blur(16px);
-webkit-transition: .1s;
transition: .1s;
}
.blur:hover img {
-webkit-filter: blur(0);
filter: blur(0);
}


ぼかして白黒に

フィルタは複数組み合わせることも出来ます。ブラーに加えて、グレースケールを足しました。

色を落とすと よりマイルドになるので、白黒にしたときのぼかし径についてはそれほど大きく取らなくても大丈夫だと思います。

あんまりぼかすとスマホで重くなることがあるため、実機でもチェックすると良いです。

デモ

CSS

【CSS】
.gray img {
-webkit-filter: grayscale(100%) blur(8px);
filter: grayscale(100%) blur(8px);
-webkit-transition: .1s;
transition: .1s;
}
.gray:hover img {
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0;
}


透明にして消す

opacity を使ったネタバレ注意フィルタです。こちらは外側のDIVが不要なので実用度が高いのではないでしょうか。(デモではタップ範囲を判りやすくするためDIVをかぶせてます。)

デモ

CSS

【CSS】
.disappear{
  filter: alpha(opacity=0);
  -moz-opacity:0;
  opacity:0;
}
.disappear:hover{
  filter: alpha(opacity=100);
  -moz-opacity:1;
  opacity:1;
}


あえてDIVを設定して着色するというアイディアもあります。

おわりに

CSS3 の filter 効果を使った画像エフェクトのサンプルソースをご紹介しました。

何か面白い使い道があったら教えて下さい。