Rounded Image hover effect. (Efek gambar melengkung)

Maafkan saya, sebab lama tak update. Tapi terima kasih, korang still singgah sini. =')

Sekarang nak buat tutorial Rounded Image hover effect atau efek gambar lengkung (main tibai je name benda alah ni. haha. ;p). Ramai sangat dah mintak, sila lempang nadd sekarang sebab lambat sangat buat tutorial ni. T______T

Ni lah contoh efek gambar tu bile cursor di halakan ke gambar. =)

*sorry tau lambat. =_______=" *

Untuk minima template & classic template (Temp.Designer kat bwh.)

1. Pergi Dashboard >> Design >> Edit HTML
2. Then, tekan kat keyboard : "Ctrl + f" (tekan Ctrl dgn f serentak), akan keluar satu kotak find.
3. cari code ni : a img {
4. Pastu, copy code bawah ni pulak : 

   -webkit-transition-duration:.4s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FA58AC; -moz-box-shadow: 0px 0px 20px #FA58AC; -webkit-border-top-right-radius:20; -webkit-border-top-left-radius:20; -webkit-border-bottom-right-radius:20; -webkit-border-bottom-left-radius:20;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px dashed #FA58AC; border-radius: 30px; -moz-border-radius: 30px;}

   *noted: tulisan berwarna boleh ubah. #FA58AC boleh tuka color lain kat SINI. dashed boleh tukar jadi: solid/dotted/inset/outset/double (test sendiri)
   
   
5. Paste kan di sebelah a img { tadi. =)
6. SIAP!

Untuk Template Designer

1. Pergi Dashboard >> Design >> Edit HTML >> pilih Template Designer *sebelah Edit HTML*
2. cari :
3. Then cari, Add CSS. Copy and paste code ni kat situ. (tengok gamba)

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

Last: SAVE je. SIAP! =)

ok.BaiBai. <3

p/s: AWAY untuk 3 HARI.

pergi BERCUTI. yay! :D

UPDATED!

Tutorial ni maybe dah tak support format blog baru skrg,

sbb tu ramai yang buat tak jadi.

Cubalah byk kali, tapi if still tak jadi..

tak dapek den nak nolong.

Sorry T___T

Tweet ♥