Cara Membuat Efek Gambar Mengecil saat Mouse Lewat di Blog

Ini adalah postingan pertama saya yang tidak berhubungan dengan Android, melainkan tentang Blogger. Berhubung saya belum punya inspirasi untuk membuat postingan baru tentang Android, dan kebetulan ada ilmu ini, saya share saja :) siapa tau kalian sobat droiders ingin mempercantik blognya dengan efek ini.

Nah postingan kali ini saya akan membagikan kode CSS3 yang memberikan efek pada mouse lewat (baca:hover) yaitu gambar akan sedikit mengecil dengan efek smooth. Contohnya coba kalian arahkan mouse ke gambar dibawah ini :

Bagaimana ? Jika kalian tertarik silakan ikuti langkah - langkah dibawah ini :

1. Login ke akun blogger kalian, lalu pada dashboard klik menu dropdown dan pilih template

Biasakan backup template kalian sebelum mengedit template

2. Pada template klik 'Edit HTML'

3. Nah sekarang pada form edit template cari kode <b:skin> (Klik formnya lalu tekan Ctrl+F untuk pencarian)

4. Copy kode CSS dibawah lalu  paste dibawah kode <b:skin>

img {
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
}
img:hover {
-webkit-transform: scale(0.95,0.95);
-moz-transform: scale(0.95,0.95);
-o-transform: scale(0.95,0.95);
-ms-transform: scale(0.95,0.95);
transform: scale(0.95,0.95);
}

5. Setelah itu klik tombol Simpan template. Sekarang cek blog kalian..jika efeknya berhasil...selamat !! :)

Semoga bermanfaat..good luck :)