Cara Membuat Gambar Membesar Otomatis Saat Disorot

Gambar Membesar Saat Disorot - Pernah saya temukan suatu blog yang menggunakan script tertentu untuk memungkinkan gambar di blognya menjadi membesar ketika disorot mouse. Lalu sebenarnya apa gunanya hal tersebut? Ternyata membesarkan gambar yang ada pada postingan blog dengan cara disorot pointer mouse tersebut berguna untuk memudahkan pengunjung agar lebih jelas melihat detail gambar yang resolusinya kecil dan sulit di lihat, sehingga gambar akan terlihat lebih jelas ketika disorot mouse. 

Sebagai contoh silahkan sorot gambar dibawah ini :

Contoh gambar diatas memperlihatkan tulisan dibawah EHPEDIA sangat kecil dan tidak jelas, namun lain hal ketika disorot mouse gambar menjadi membesar dan tulisan yang kecil tersebut bisa terbaca dengan jelas.

Cara Membuat Gambar Membesar Otomatis Saat Disorot

1. masuk ke blogger 

2. Pilih "template", lalu klik "edit html" 

3. kemudian letakan kode di bawah ini di atas 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>

Atau gunakan kode ini agar efek membesarkan gambar ini hanya ada pada halaman postingan / artikel :

 <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>

Catatan : (1.2) adalah angka pembesaran yang terjadi jika gambar disorot. Sesuaikan ukuran dengan kebutuhan blog anda.

Demikian semoga dapat membantu anda.