TUTORIAL : HOVER EFFECT PADA GAMBAR

Tutorial untuk membuat kesan khas / hover effect pada gambar apabila dialukan cursor :

CARA PERTAMA :

1. Dari dashboard > design > edit html

2. Dengan menggunakan fungsi find (ctrl + F), cari code

a img {

3. Delete kod selepas a img {, dan gantikan code di bawah.

-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



4. preview. kalau ok jangan lupa SAVE.

CARA KEDUA :

Bagi yang tidak jumpa kod a img {
copy kod di bawah, 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.
gantikan kod warna tulisan berwarna merah dengan kod warna pilihan anda DISINI 

kod warna diatas adalah warna pink ^^