Senarai Tutorial

Cara buat efek zoom pada image dalam post - Efek 2 (opacity image)

Lihat preview di bawah:
Apabila mouse over, gambar tersebut akan auto zoom in dan zoom out. Ikuti tutorial di bawah untuk mengaplikasikan trick ini pada blog anda:

1) Sign in akaun blogger anda

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"
3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod  
]]></b:skin>

4) Copy paste kod di bawah sebelum kod ]]></b:skin> yang anda cari dalam langkah 3 tadi
.post img {
filter:alpha(opacity=60); /* Internet Explorer */
opacity:0.6; /* standard CSS3 */
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
}

Contoh, rupa kod anda akan kelihatan seperti ini:
.post img {
filter:alpha(opacity=60); /* Internet Explorer */
opacity:0.6; /* standard CSS3 */
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
}
  
]]></b:skin>

5) Akhir sekali, klik Preview dan jika tiada error, klik Save.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

2 komen budak comel:

toink+toink+toink n_n said...

npe xjdi ea??

Mommy Nini (^^,) said...

amazing..jadik la...cantik.Gmabar blog kecik. Bila buat cmni dpt tgk gmbr besar ckit. Tq..nt jom tgk blog kite www.butikbajubaby.co ye

Copyright© All Rights Reserved Jombinabelog.blogspot.com