Efek Perbesaran Gambar

Sebelumnya saya ucapkan turut berduka cita atas wafatnya Gesang dan Hj. Ainun Habibie. Semoga mereka diterima amal baiknya dan semoga keluarga yang ditinggalkan diberi ketabahan oleh Yang Maha Kuasa. Amin...

Pada postingan seminggu yang lalu kita membahas tentang efek redup-terang untuk gambar. Nah, kita juga akan membahas tentang efek gambar disini. Tetapi, efek gambar kali ini adalah ketika kursor mouse melintas di atas gambar tersebut maka gambar tersebut akan membesar. Biasanya ini sangat cocok untuk gambar yang berukuran 125x125. Contohnya seperti pada gambar di atas. Yang kiri adalah kondisi gambar pada saat biasa dan yang kanan adalah kondisi gambar pada saat kursor mouse melayang diatas gambar tersebut.

Sekedar catatan, tekhnik ini menggunakan CSS3 jadi tidak akan bekerja di Internet Explorer.

Langsung sajaa!!!

1. Login ke Blogger, lalu seperti biasa, klik Tata Letak > Edit HTML.

2. Backup template anda.

3. Cari kode ]]></b:skin>, lalu taruh kode berikut diatasnya.

.besar:hover{
-moz-transform:scale(1.25);
-webkit-transform:scale(1.25);
}

4. Kalau sudah, klik Simpan Template.

Untuk memasukkannya ke blog, pilih Tata Letak > Elemen Halaman > Tambah Gadget > HTML/Javascript. Lalu pada bagian isi ketikkan kode berikut.

<a href="LINKYANGDIINGINKAN"><img src="URLGAMBAR" class="besar"/></a>

LINKYANGDIINGINKAN adalah link yang diinginkan, sedangkan URLGAMBAR adalah URL dari gambar.

Anda juga bisa meletakkannya di pastingan anda. Pada mode Edit HTML tentunya. Semoga bermanfaat.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya