Kesan Khas Pada Gambar Apabila Dilalukan Cursor

Satu kemestian bagi sesebuah blog mempunyai gambar di dalamnya . Tidak kira dalam entri atau di bahagian lain . Dan lebih menarik jika gambar yang anda letakkan memberi sedikit kesan khas apabila anda lalukan cursor  padanya

Anda boleh lihat kesannya di DEMO bawah ini :)

Tutorial untuk membuat kesan gambar ini adalah seperti berikut .


1. Dashboard > Design > Edit HTML
(backup template untuk langkah berjaga-jaga)


2. Dengan menggunakan fungsi find (ctrl + F), cari kod  a img {


3. Delete kod selepas  a img { dan gantikankod dibawah ini .


-webkit-transition-duration:.4s;}

img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}


Contoh :


Sebelum

Selepas

Bagi yang tidak jumpa kod  a img {


Copy kod dibawah , dan paste SEBELUM  /* Headings atau /* Header


a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}


Note : Anda boleh mengubah warna hover effect . Default warna pink . Kalau hendak tukar warna lain , tukarkan FF66CC dalam kod diatas dengan kod warna yang anda suka . (kod warna lain anda boleh rujuk di SINI)

---

Thank you for reading :*

---