5/02/12

Tutorial cara buat zoom efek pada image pada entry sahaja


Tutorial ni atas request NazaKu

Kalau sebelum ni saya ada buat tutorial zoom efek pada gambar.. dalam tutorial tu efek tu pada semua gambar di blog..

Kali ni hanya untuk gambar pada entri sahaja

Mula2 pergi ke desbot---design---edit html.... tidak perlu tick pada expand widget template..

Cari code

]]</b:skin>

kemudian masukkan code masukkan code di bawah sebelum code yang dicari tadi

.post img, table.tr-caption-container {
border:none;
height:auto;
-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.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);border-radius:15px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}


CONTOH


.post img, table.tr-caption-container {
border:none;
height:auto;
-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.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);border-radius:15px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}
]]</b:skin>

Kemudian preview,, jika ok save...

kawalan saiz zoom terletak pada no 1.5 yang aku besarkan tu.. edit mengikut kesesuaian... makin besar angka makin besar la zoom dia

Sekian

13 ulasan:

~nazaku~ berkata...

yeah yeahhhh..
jap mo cubaaaaaaaa...
ngeeeeeeee...

~nazaku~ berkata...

aduhhh..nda jumpa ]]
ini jak yg aku jmpa dlm html ku..

.post-body img {
padding: 8px;
background: $(image.background.color);
border: 1px solid $(image.border.color);

-moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);

-moz-border-radius: $(image.border.radius);
-webkit-border-radius: $(image.border.radius);
border-radius: $(image.border.radius);
}

Polskahackrew berkata...

@~nazaku~
kasi ganti tu code sama code dlm entri.. blh jg tu.. nnti bagitau ok atau nda,,

~nazaku~ berkata...

dapat..tapi, bole ka kes kekal tu padding; 8px and diz zoom telalu besar ba. kes kecik sikit amacam?

hihihi...

Polskahackrew berkata...

@~nazaku~padding tu blh taruh.. nnti aku bagi tau.. lapar ni.. mau makan dl.. ekekek.. nnti aku kasi tau d shoutbox kau.. ('',)

gHadiskeCik berkata...

thanks..saya dh try:)

Polskahackrew berkata...

@gHadiskeCikur welcome.. thanks bagi feedback

~nazaku~ berkata...

suda ku ubah 1.3 semat. tapi,mana paddingnya jow? hihihi..

Polskahackrew berkata...

@~nazaku~aiseh macamana aku blh lupa.. cuba rujuk sini

http://blogger-blog-tutorial.blogspot.com/2011/10/cara-menambah-efek-pada-code-css.html

belajar perkara asas tambah code css.. asas ni antara yang penting.. kalau nda blh jg nanti bagi tau..

~nazaku~ berkata...

siapppp... :)

ini aku ubah..


.post img, table.tr-caption-container {
padding: 8px;
background: $(image.background.color);
border: 1px solid $(image.border.color);
height:auto;
-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.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);border-radius:15px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);

seyes best men ni brg tau... :)

Polskahackrew berkata...

@~nazaku~hehe.. best kan.. ('',)

ciK_Nana berkata...

xjumpe kod tu hurmmmmm

Polskahackrew berkata...

@ciK_Nana
thanks bagi tau.. dah edit da... ('',)

entri ja

Related Posts Plugin for WordPress, Blogger...