11/11/11

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

12 ulasan:

Aqmil Lambung berkata...

kenapa x jumpa code
a img {
border-width:0;
}


dah try x tick expand dengan expand

Polskahackrew berkata...

@Aqmil Lambung

cuba masukkan code tu macam masukkan code untuk hilangkan navigation bar tu..
masukkan code tu sebelum ]]>

Polskahackrew berkata...

masukkan sebelum ]]></b:skin>

Aqmil Lambung berkata...

kelabu sangat bro... boleh ekjas x kekelabuan dia?? ahahaha




Blog Bukan Sekadar Tulisan | by Aqmil Lambung

far_east berkata...

saya cuma jumpa code ' a img{' saja...mungkin sebab dekat code tue dah diedit sebelum nie...

Polskahackrew berkata...

@far_east

awak dah penah edit ke..kalau nak letak efek ni kena buang efek lama dulu..('',)

~nazaku~ berkata...

kelabu sgt .. huhuhu....

Polskahackrew berkata...

@~nazaku~boleh ejas tahap kelabu dia.. ('',)

~nazaku~ berkata...

how deh?

Polskahackrew berkata...

@~nazaku~
ubah code

opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5;

kepada

opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8;

contoh

sebelum ubah

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; }

selepas ubah

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.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; }

cuba perhatikan betul2 perbezaan code tu

('',)

./Riedho-Cbs berkata...

nice blog masta :)

Polskahackrew berkata...

@./Riedho-Cbs
thanks bro.. ('',)

entri ja

Related Posts Plugin for WordPress, Blogger...