Cara Membuat Gambar Membesar Saat Kena Kursor Seperti Kompi Ajaib

Tutorial blog kali ini tentang cara membuat efek gambar atau thumbnail membesar saat disentuh kursor atau mouse di blog seperti yang bisa anda lihat pada halaman depan blog Kompi Ajaib. Efek gambar membesar ini akan memperindah tampilan blog, lebih kelihatan hidup dan penuh animasi.

Baca juga: Membuat Social Share Button Responsive Tanpa JavaScript di Blog

Efek animasi thumbnail membesar ini dapat anda terapakan pada halaman depan blog atau pada postingan tampil penuh. Jika anda tertarik untuk menerapkan trik ini di template blog anda, silahkan ikuti caranya berikut.

Cara Membuat Efek Thumbnail Membesar Saat disentuh Kursor

Pada tutorial ini saya akan menggunakan kerangka thumbnail seperti pada blog pada umumnya, yaitu untuk halaman depan(homepage) yang menggunakan kode css .post-thumbnail. Untuk melihat demonya, anda bisa lihat dihalaman depan blog ini (jika belum diganti).

1. masuk ke blogger, buka dasbor blog, kemudian pada menu klik Template > Edit HTML
2. Kemudian letakkan kode berikut  ini di atas </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.post-thumbnail{float:left;margin:0;padding:0;width:90%;overflow:hidden}
.post-thumbnail img{display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:0;position:static;transition:all .8s ease-out;border-radius:5px !important;overflow:hidden}
.post-thumbnail img:hover{-webkit-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3);}
</style>
</b:if>
</b:if>

3. Simpan template, dan lihat hasilnya dengan membuka homepage blog anda.

Setiap struktur template berbeda-beda, ganti kode .post-thumbnail dan sesuaikan dengan struktur template anda.

Demikian tutorial tentang cara membuat gambar membesar saat tersentuh kursor di blog seperti pada blog Kompi Ajaib. Anda tertarik untuk menerapkannya di blog anda? Selamat mencoba.