Membuat efek Blur dengan CSS

Blur effect with CSS berfungsi untuk membuat konten di sebuah blog menjadi Blur atau buram. Fungsi ini mirip dengan show hide pada Spoiler atau Accordion. Yang membedakan, konten tidak disembunyikan melainkan diburamkan atau Blur. Jadi space tetap terisi & tidak kosong

Karena ini menggunakan CSS dan tidak membutuhkan Javascript. Yang berarti bisa juga diterapkan di AMP HTML.

Langsung saja berikut langkah-langkahnya :

Copy paste CSS dibawah ini

/* effect blur by.MBahas.com */
#blr {
position: relative;
z-index:9999;
top:0px;
}

input[type=checkbox] + .blu {
-moz-filter: blur(10px);
-webkit-filter: blur(10px);
-o-filter: blur(10px);
filter: blur(10px);
background:transparent;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
margin:40px 0 15px 0;
} 

input[type=checkbox]:checked + .blu {
-moz-filter: blur(0);
-webkit-filter: blur(0);
-o-filter: blur(0);
filter: blur(0);
background:transparent;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
margin:10px 0 0 0;
}

Untuk mengatur tingkat keburaman ubah nilai filter dibawah ini

/* effect blur by.MBahas.com */

-moz-filter: blur(10px);
-webkit-filter: blur(10px);
-o-filter: blur(10px);
filter: blur(10px);

Setelah itu letakkan kode HTML dibawah ini di halaman posting sesuai yang anda inginkan.

<input id='blr' name='blr' title='' type='checkbox'/> Tampilkan
<div class='blu'>

Konten -isi dengan Teks, Gambar atau Video-

</div>

Anda bisa mengisi konten apa saja yang ingin diblur / Buramkan. Demo ada dihalaman berikut (selama belum ada perubahan) :

DEMO 1

 

DEMO 2

Selamat mencoba & berinovasi

- Update 03 Februari 2017 -
+ penambahan kalimat +