Besarkan gambar dgn gerakan mouse

Dengan CSS atau cascading style sheet byk menda kita boleh buat. Salah satunya, gambar yang saiz nya besar smpai terkeluar dr post border kita minimize ke size lebih kecil dan apabila kita gerakkan mouse tu, gambar tu mbesar kembali ke saiz asal. Aku tak buat utk blog ni tp korang boleh tgk demo kt bwh ni.
                                     DEMO
langkah2nya:
1. pi kt Design > Edit HTML
2. cari( Ctrl F)  ]]></b:skin>
3. copy paste code kt bawah ni sebelum  ]]></b:skin>

.MBT-CSS3 img{

-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/

-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/

-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/

-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/

-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/

-o-transition-duration: 0.5s; /*Opera Animation duration*/

opacity: 0.5;

margin: 0 10px 5px 0;

}

.MBT-CSS3 img:hover{

-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/

-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/

-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/

box-shadow:0px 0px 30px gray;

-webkit-box-shadow:0px 0px 30px gray;

-moz-box-shadow:0px 0px 30px gray;

opacity: 1;

}

Jika nk kurangkan saiz gambar tu, boleh rendahkan nilai 0.7 atau kalau nk kaburkan lg, kurangkan nilai 0.5 dan (sebaliknya). Ok, nk bagi gambar tu ada effect, kita kne guna code kt bawah ni dlu, kalau x gambar tu jd mcm biasa

<div class="MBT-CSS3">

<img src="Image URL Goes Here" />

</div>

Sekarang upload gambar kt Blogger dan gantikan Image URL Goes Here dgn link gambar kita tu. Yeah siap!

kalau nk tmbah gmbar lain, tambah stu lg  <img src=”Image URL Goes Here” /> sebelum  </div>


SUMBER