tutorial hover zoom image

4 comments
apa hover zoom image ni?.. ia bermaksud, kalau korang lalukan cursor kat gambar dalam entri korang tu, dia akan zoom secara automatik... tak perlu nak klik2 untuk zoom image tu... ok?..

let's start..

login akaun blogger korang > Template > tekan 'Backup/Restore' > Download Full Template > Edit HTML > Proceed > tick Expand Widget Templates 


tekan Ctrl+F atau F3 dan cari kod ni :
<head>

 copy kod ni, dan paste kat bawah atau selepas kod <head> tadi..

<style>.post img:hover {-o-transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-moz-transform: scale(1.2);-o-transform: scale(1.2);-webkit-transform: scale(1.2); }
</style>

penerangan kod : 

a ) warna biru : masa yang diambil untuk image membesar..

b) warna hijau : 1.2 bermaksud korang nak besarkan (zoom in) gambar tu.. kalau nak zoom out gambar, ganti 1.2 tu dengan 0.3.. 

tu je... hehe...
Next PostCatatan Terbaru Previous PostCatatan Lama Laman utama

4 ulasan

  1. Amboi tutorial css3 ni tapi bagus jugak benda ni diajar sebab some of css3 ni kalau pandai guna boleh ganti flash. tak yah susah2 nak bikin flash.

    BalasPadam

nak tanya soalan tapi takder akaun blogger dan lain-lain? boleh tanya soalan kat fanpage Blog Gary!!™ :)