Cara Membuat Efek Buram Pada Gambar (Blur Effect)

Photo di sebelah kiri ini merupakan bentuk gambar yang telah di beri efek buram (blur effect). Untuk melihat tampilan photo sebenarnya, silahkan kalian arahkan kursor pada gambar. Nah mau tahu cara membuat tampilan gambar seperti photo tersebut? Baiklah pada postingan kali ini saya akan mencoba memberitahu kepada kalian cara memberikan efek buram (blur effect) pada gambar seperti yang tampak pada photo disebelah kiri ini.

            Ada dua variasi tampilan untuk menampilkan gambar dengan efek buram (blur effect). Variasi pertama adalah menampilkan tampilan gambar buram terlebih dahulu dan menampilkan tampilan gambar sesungguhnya ketika kursor menyentuh gambar (lihat gambar 1). Variasi kedua adalah menampilkan tampilkan gambar sesungguhnya terlebih dahulu dan menampilkan tampilan gambar buram ketika kursor menyentuh gambar (lihat gambar 2).

Gambar 1	Gambar 2

            Silahkan kalian "login" pada blog yang kalian miliki. Masuklah ke bagian tata letak dan pilih "Edit Html". Pada halaman tersebut, carilah kode di bawah ini.

]]></b:skin>

            Setelah kalian temukan kode di atas, silahkan kalian letakkan kode di bawah ini tepat di atas kode ]]></b:skin> tersebut dan kemudian "simpan template".

.blur-before {
  opacity: .4;
  -moz-opacity: .4;
  filter: alpha(opacity=40);
  } 
.blur-before:hover {
  opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=100);
  }
.blur-after {
  opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=100);
  }
.blur-after:hover {
  opacity: .4;
  -moz-opacity: .4;
  filter: alpha(opacity=40);
  }

            Setelah kalian masukkan kode di atas, untuk selanjutnya setiap kalian ingin menampilkan gambar dengan efek buram maka tambahkan atribut kode img class="blur-before" untuk hasil seperti gambar 1 di atas dan atribut kode img class="blur-after" untuk hasil seperti gambar 2 di atas. sebagai contoh lihat kode di bawah ini untuk setiap masing-masing gambar di atas.

<img class="blur-before" src="http://img4.imageshack.us/img4/4620/blurpi1.jpg"/>

<img class="blur-after" src="http://img4.imageshack.us/img4/4620/blurpi1.jpg"/>