Membuat Gambar Membesar Saat Disorot Kursor

Oleh Unknown

Monday, August 24, 2015

Membuat Gambar Membesar Saat Disorot Kursor - Setelah sebelumnya membahas tentang membuat link membesarsaat disentuh kursor, kali ini sinahu coding dengan pembahasan yang masih mirip yaitu cara membuat gambar membesar saat disorot kursor.

Efek gambar membesar atau image zoom effects ini lumayan banyak digunakan oleh para blogger. Efek seperti ini membantu pengunjung untuk melihat konten gambar lebih jelas hanya dengan menyorotkan kursor ke arah gambar, tidak perlu membuka link gambar ke tab baru.

Nah, kalau konco sinahu tertarik untuk menambahkan efek ini pada blog, cukup ikuti langkah-langkah mudah berikut ini :

Cara Membuat Gambar Membesar Saat disentuh Cursor

1. Login ke Blogger

2. Masuk ke Template => Edit HTML.

3. Cari kode ]]></b:skin> , kemudian letakkan kode berikut tepat di atas kode ]]></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); }

4. Terakhir simpan template

Itulah tutorial sederhana untuk menambahkan efek gambar membesar pada postingan. Semoga bermanfaat dan sampai jumpa pada postingan yang lain.

---