Tutorial: Blur Image Hover Effect

Assalamualaikum.

Setelah berjaya mengkaji image hover effects, apa salahnya kongsikan dekat sini.
Basically bila guna effect blur ni, automatic semua gambar dalam blog akan menghasilkan blur effect bila kita halakan cursor ke atasnya.

Sorry yang dalam gambar ni tak obvious.

((CLICK HERE FOR LIVE DEMO))

Step 1:
Copy the codes below.

img{
-webkit-filter: -webkit-filter: blur(1px);
}
img:hover{
z-index: -9999999999999999999999999px; -webkit-transition: 0.5s ease-in; -moz-transition: 1s ease-in; transition: 0.5s ease-in;
-webkit-filter: blur(1px);
}

Step 2:
Untuk pengguna simple template, pergi ke Template>Edit HTML.
Tekan Ctrl + F serentak dan cari code ]]></b:skin>
Paste codes tadi di ATAS code ]]></b:skin>

Untuk pengguna blogskin, pergi ke Template.
Tekan Ctrl + F serentak dan cari code <style>
Paste codes tadi di BAWAH code <style>

Step 3:
Tukar 1px tu kepada beberapa angka yang anda nak. Semakin besar angka, semakin strong dia punya blur effect. Tapi tak digalakkan guna angka yang besar sebab sakit kepala tengok blur effect yang terlampau strong. Guna 1px - 5px je okay.

Step 4:
Klik Preview. Bila dah berkenan, klik Save.

DONE!

Credit image: Skyler95