Image Hover Part II.
Sunday, 14 October 2012 @ 4:43 pm | Leave a comment?
Holla ! ^_^
Hmm.. Hari ni Yunie nak buat lagi tutorial pasal Image Hover . Tapi kali ni Part II pulak la . Ok,bagi sesiapa yang taktau lagi apa benda image hover tuh, yuni akan bagitau . Sebenarnya, Image Hover tu ialah Image Melengkung . Gambar akan melengkung bila cursor menyentuh . Gambar tuh akan melengkung macam yang kita dah tetapkan dalam code nya . :) ok, let's start .
Eh, jap-2 . sebelum yunie terlupa, tutor. ni hanya untuk pengguna Template Designer sahaja .
1- Dashboard > Design > Edit HTML > Tick Expand Widget Template
2- Tekan ctrl+f (serentak) dan cari code ni,
/* Header----------------------------------------------- */3- Dah jumpa ? Ok, baguss . Pastu copy code di bawah ni :
img {border-radius:10px;opacity:0.6;-webkit-transition-duration:2.5s;}img:hover{border-radius:30px;opacity:10.8;-webkit-transition-duration:2.5s;}4- dan Paste kan dibawah code yang first tadi .
5- Dah siap . Preview & Save :)