Cara membuat gambar membesar ketika disorot cursor/mouse

Senin, 17 Desember 2012
Membuat Gambar Membesar Keika Disorot Pointer Mouse ini diperlukan. Ok, sob cara pemasangannya juga mudah jadi simak baik - baik sob :).
1. Pertama sobat simpan kode dibawah ini diatas kode ]]></b:skin> pada template sobat. Template > Edit HTML > Centang Expand Template Widget. 
 .post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}
2.  Selanjutnya pilih salah satu kode dibawah ini dan simpan diatas kode </head>.
  • Jika sobat ingin efek ini berlaku diluar postingan juga maka simpan kode ini diatas kode </head>
<style type='text/css'>
.post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}
</style>
  • Jika sobat ingin efek ini hanya muncul di dalam postingan saja maka gunakan kode dibawah ini dan simpan  diatas kode </head>.
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}
</style>
</b:if>
3. Langkah terakhir Save.

Itulah tips singkat  Membuat Gambar Membesar Keika Disorot Pointer Mouse. Oh, iya sob demonya seperti gambar diatas.
Selamat mencoba dan semoga  bermanfaat

0 komentar:

Posting Komentar