CSS image hover effects blur

DEMO:

CSS image hover effects blur, gambar yang semula blur saat gambar di sorot kursor menjadi jelas.

ini contoh css & htmlnya.

<style type="text/css">
.hover07 img {
 -webkit-filter: blur(3px);
 filter: blur(3px);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover07:hover img {
 -webkit-filter: blur(0);
 filter: blur(0);
}
</style>

<div class="hover07 img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8DqKHBQXJJX2FiORFnyXJFktm0QkDTTQggoxHphmIDnXMxha5SMxQNqJYQ9nioF__B2UOWeMGix89c0yU36RTCB_HjFdK2ktAn-CEeMECh4FwpUS20Gi4m4bGNzke7RXhRv46qMwes7WR/s320/beach.jpg" />
</div>

Selamat mencoba.