Tutorial cara buat zoom efek pada gambar #2

Tutorial cara buat zoom efek pada gambar #2 By Blogger blog Tutorial

Sebelum ni aku ada buat zoom efek pada gambar..kali kira aku upgrade sikit efek tu..aku tambah opacity efek..tau apa opacity..aku pun x tau..yang aku tau efek tu buat gambar pudar..

Anda boleh tengok sendiri pada live demo..letakkan mouse pada gambar di bawah ni..tgk apa jadik..






Mula2 pergi ke desbot---desaign---edit html...jangan tick pada expand widget template...ini adalah permainan coding CSS...ada paham...
cari code di bawah ni..

a img {
border-width:0;
}

kemudian gantikan dengan code

a img, table.tr-caption-container {
border:none;
max-width:560px;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
height:auto;opacity:0.5;   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);   -moz-opacity:0.5;   -khtml-opacity:0.5; }



a img:hover {
opacity:1.0;   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);   -moz-opacity:1.0;   -khtml-opacity:1;
-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);-moz-border-radius: 50px 50px; border-radius: 21px 21px; }

preview..memang confirm ok..kalau silap pun tetap ok jg untuk code CSS..sebab x ada message error untuk CSS..ingat tu..
yang penting anda copy code tu dengan betul..tidak lebih dan tidak kurang....

save..selesai..

sekian