Cara Membuat Efek Blur Pada Gambar

Sesuai dengan nama judul postingan yaitu cara membuat efek blur (samar) pada gambar/foto, yang jelas gambar tersebut sepintas akan terlihat samar/kabur dan akan terlihat lebih jelas atau terang setelah disorot oleh mouse. Pasti anda penasaran ingin melihat hasilnya dan tertarik ingin memasangnya juga. Ok langsung saja ke pembahasan membuat efek gambar samar/blur.

Cara Membuat Efek Blur (Samar) Pada Gambar
1. Login ke blogger
2. Klik Tata Letak
3. Klik Edit HTML.
4. Backup dulu template anda untuk jaga-jaga kalau salah
5. Centang Expand Template Widget
6. Gunakan ctrl+F untuk mencari kode ]]></b:skin>
7. Letakkan kode berikut di atas kode ]]></b:skin>

.linkopacity img {
filter:alpha(opacity=20);
-moz-opacity: 0.20;
opacity: 0.20;
border:0;
}
.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.linkopacityxtra:hover img {
filter:alpha(opacity=1.1);
-moz-opacity: 1.1;
opacity: 1.1;
border:0;
}
  
8. Simpan Template

Keterangan :

Semakin rendah nilai opacity pada teks warna merah diatas, maka akan semakin samar/kabur tampilan gambar tersebut.

Untuk membuktikan efek dari kode diatas bekerja apa tidak, silahkan anda buat satu postingan dan sisipkan kode seperti ini pada postingan yang bergambar. Kode dibawah ini berlaku untuk selamanya pada setiap postingan yang anda pasang gambar (gambar samar/blur menjadi terang)

<a href="url tujuan" class="linkopacity"><img src="url sumber gambar"></a>

Untuk melihat hasilnya akan saya cantumkan contohnya, dan mulailah mouse anda sorot ke gambar dibawah ini, yuk mulai :

Bagaimana menurut anda, sudah paham bukan? Maksud saya paham dengan gambar cewek sexy diatas, hehehe, ya udah selamat mencoba Cara Membuat Efek Blur Pada Gambar, semoga bermanfaat.