Membuat Efek Gambar Membesar saat Dilaluai Cursor

Cara Membuat Efek Zoom pada Gambar Ketika Dilaluai Cursor. yaitulah yang saya bahas untuk mempercantik blog. Cara Membuat Efek Zoom pada Gambar Ketika Dilaluai Cursor berguna untuk membesarkan gambar pada gambar di posting blog sobat blogger, contoh nya berada paling atas artikel ini.

Berikut caranya :

1. Login Pada blog anda

2. Klik Rancangan pada dasbor blog anda

3. Pilih Edit HTML .

4. Centang Expand Template Widget

5. Cari code ]]></b:skin> untuk mempermudah caranya (CTRL+F atau F3) pada

keyboard anda.

6. Apabila anda sudah menemukan code ]]></b:skin> pastekan kode dibawah berikut dan taruh code dibawah berikut di atas code ]]></b:skin>

.cayunhover img{
-webkit-transform:scale(0.3); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.3); /*Mozilla scale version*/
-o-transform:scale(0.3); /*Opera scale version*/
-webkit-transition-duration: 9.9s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.cayunhover img:hover{
-webkit-transform:scale(1.2); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.4); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px blue; /*Kode Css3 untuk efek shadow*/
-webkit-box-shadow:0px 0px 30px blue; /*Untuk safari*/
-moz-box-shadow:0px 0px 30px blue; /*Untuk Mozilla*/
opacity: 1;
}

7. SAVE TEMPLATE

8. Apabila anda sudah selesai silahkan anda memposting semau anda apabila ingin gambar membesar. Berikut kodenya dan jangan lupa HTML di bawah ini hanya di posting saja.

<div class="cayunhover">
<img src="http://4.bp.blogspot.com/-QZ1Njc8_5ns/T6KYl69U_QI/AAAAAAAAAaU/rArlxyiW-5E/s1600/blog-rissman.png"/>
</div>

9. Eitssssss.........jangan lupa link gambar merah ini http://4.bp.blogspot.com/- QZ1Njc8_5ns/T6KYl69U_QI/AAAAAAAAAaU/rArlxyiW-5E/s1600/blog-rissman.png ganti dengan link gambar anda.

MUDAH JUGA KAN