CSSのフィルターを使ってblur効果

iOS7でも使われていているけど、
CSSだと現時点では(2013年)このフィルターがブラウザでサポートれていなかったりでwebkit(chrome、safari)でしか使えないけど、
スマホ・タブレット専用であれば使えそう。

hover

<style type="text/css">
.blur {
width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: #ccc;
padding:20px;	
}
.blur:hover {
-webkit-filter: blur(3px); 
filter: blur(3px);
}
</style>
<div class="blur">
<p>blur</p>
<p><img src="http://lorempixel.com/400/200/sports/" alt="" /></p>
</div>