Membuat Auto Image Zoom With CSS Ease-Out

Print this page
.post-body img { padding: 8px;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition:all 2s ease-out;-moz-transition:all 2s ease-out;-o-transition:all 2s ;opacity:0.4;margin:0 10px 5px 0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border:2px inset #424242;box-shadow:0px 0px 30px #fff;-webkit-box-shadow:0px 0px 30px #fff;-moz-box-shadow:0px 0px 30px #fff;
}
.post-body img:hover{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border:2px dotted #FF0000;box-shadow:0px 0px 30px #F80505;-webkit-box-shadow:0px 0px 30px #F80505;-moz-box-shadow:0px 0px 30px #F80505;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);opacity:1;
}


Berikut Cara pemasangannya :

1. Login ke Blog Sobat
2. Pilih Rancangan Lalu Klik Edit HTML
3. Cari kode .post-body img
4. Lalu ganti dengan Kode diatas
5. Bila kode  .post-body img tidak ada, Letakkan saja Kodenya, diatas kode ]]></b:skin>
6. Rubah Variabel2nya dan kode2 warnanya biar lebih menarik
7. Lalu Simpan

Untuk Contoh Lihat DISINI

Artikel Terkait