Teknik Membuat Gambar Membesar Saat Tersentuh Cursor

Teknik Membuat Gambar Membesar Saat Tersentuh Cursor

Barangkali sejumlah Blogger seringkali lihat gambar yang membesar bila tersentuh kursor. Di dunia blogging feature semacam ini seringkali dinamai Image Zoom Effects atau Hover Zoom Smooth Effects.

Featur yang ini agak banyak di sukai beberapa blogger meskipun sebetulnya dengan menempatkan Image Zoom Effect ini di website bisa mengganggu pengunjung yang sedang membaca artikel kita.

Untuk beberapa topik blog, hover pada gambar dapat menjadi keunikan tersendiri sekaligus dapat menambah daya tarik pengunjung jika pemasangannya tidak berlebihan.

Siapa yang tidak mau blog pribadinya terlihat menarik dan keren di mata pembaca dan visitor blog. Tentu saja untuk mendandani blog semoga lebih terlihat kreatif itu perlu mendapat wangsit dan mengetahui dasar-dasar wacana syntax coding di dalam template blog.

Adapun cara untuk menciptakan blog terlihat keren sanggup bermacam-macam. Mulai dari memakai animasi atau ide-ide kreatif lain yang sanggup di implementasikan di dalam desain blog.

Efek pada gambar posting blog ini hanya akan bekerja apabila pengunjung blog anda melaksanakan hover terhadap foto atau gambar di dalam postingan blog. Buat kalian yang suka membuat desain baik berupa animasi dan effect sederhana namun tetap menarik.

Tulisan ini saya bikin untuk lengkapi panduan di blog ini, buat sahabat yang ingin memasangnya silahkan praktekkan panduan berikut ini.

Langkah membuat gambar jadi membesar saat disentuh kursor:

1. Pilih Template>Ubah HTML

2. Cheklist Expand Widget Template

3. Mencari code ]]></b:skin>, menggunakan fungsi Find dengan tekan tombol CTRL+F pada keyboard

4. Jika telah ditemukan, copy paste code berikut tepat diatas code ]]></b:skin>.

.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

5. Terakhir jangan lupa untuk klik tombol Simpan Template dan lihat hasilnya di blog sobat.

👉 Trending :  Cara Menggunakan Google Maps Tanpa Koneksi Internet (offline)