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