CSS image hover opacity

CSS image hover opacity, membuat efek gambar menjadi buram.

ini contoh css & htmlnya.

<style type="text/css">
.hover11 img {
 opacity: 1;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover11:hover img {
 opacity: .5;
}
</style>

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

DEMO:

Selamat mencoba.