0 Membuat Gambar Membesar Ketika Disorot Cursor/Mouse

Langsung saja cekibrot:
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.

kayak punya ane screen shootnya:

 sumber: http://ilmubloggersyahdan.blogspot.com/2012/12/cara-membuat-gambar-membesar-ketika.html

Komentar →