ITDS: CSSを使って画像をぼかしたり戻したりしよう

今回はCSSを使って画像をぼかしてマウスポインターを乗せると画像を戻す処理をしてみます。

CSSを使用するので、Photoshopを使ったりすることなく簡単にできます。

SCP財団の方はもう少し下から読んでください。

まずはソースから

スタイルシート

<style>
.frame{
    width:300px;
    max-width:100%;
    float: right;
    clear: right;
    margin: 0 2em 1em 2em;
    border: solid 5px #666;
    box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.img{
    -webkit-filter: blur(16px);
    filter: blur(16px);
    -webkit-transition: .1s;
    transition: .1s;
}
.img:hover{
    -webkit-filter: blur(0);
    filter: blur(0);
}
</style>

HTML

<div class="frame">
<img class="img" src="sample.jpg" />
</div>

簡単な解説

filter: blur(16px)
画像をぼかすには、filterプロパティのblurという関数を使います。
blurの括弧内の数値が大きいほどぼかしが強くなります。
0は、ぼかしがない状態です。

まずはスタイルシートで画像をぼかします。

マウスポインターを乗せたときの動きは疑似クラス「ホバー(:hover)」を使います。

.img:hover{
    -webkit-filter: blur(0);
    filter: blur(0);
}

HTMLで定義したimg内にマウスポインタが乗ったときに、blurの数値を0にしています。

transitionは、ぼかしが変化するまでの時間を設定しています。

SCP財団の方はこちら↓

[[module CSS]]
.frame{
    width:300px;
    max-width:100%;
    float: right;
    clear: right;
    margin: 0 2em 1em 2em;
    border: solid 5px #666;
    box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.img{
    -webkit-filter: blur(16px);
    filter: blur(16px);
    -webkit-transition: .1s;
    transition: .1s;
}
.img:hover{
    -webkit-filter: blur(0);
    filter: blur(0);
}
[[/module]]
[[div class="frame"]]
[[image http://scp-jp-sandbox2.wikidot.com/local--files/techno-senmon/S__5242896.jpg 
class="img" alt="hand" title="SCP-XXX-JPに布団を持参しようとするSCP-XXX-JP-1"]]
◇グロ注意◇
カーソルを合わせるとモザイクが取れます
[[/div]]

動いている理屈は上記の通りで、wikidot用にタグを書き換えています。