CSS image hover Blur & Gray Scale

CSS image hover Blur & Gray Scale, membuat efek gambar buram dan berwarna hitam putih.

ini contoh css & htmlnya.

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

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

DEMO:

Selamat mencoba.