Tuesday, 13 September 2011

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 ^^

0 0 comment/s here..:

Post a Comment


My photo

Ijazah Sarjana Muda Pendidikan Fizik . mixblood daughter of Rohaya & Abdullah . part time blogger . full time muslimah . 
:: enjoy reading & literature :: art & design :: travel & bussiness ::