Membuat Efek Tilt Pada Gambar

Tilt image ada efek gambar bergerak dari posisi miring menjadi tegak agak miring...hehehe. Gambar akan berotasi ke kiri ketika cursor di arahkan pada gambar terebut. Tampilannya lumayan unik dan ini akan menjadi daya tarik tersendiri bagi tampilan gambar pada artikel blog anda. Sengaja tutorial ini tidak saya sertakan contoh atau previewnya. Artinya anda harus mencobanya sendiri dan lihat perubahan pada gambar yang ada di artikel kamu. Sekarang mari kita bahas cara Membuat efek tilt pada gambar. Ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan CSS berikut di atas kode ]]></b:skin>

.post img{-webkit-transition:-webkit-transform .15s linear; -webkit-box-shadow:0 3px 6px rgba(0,0,0,.25); -moz-box-shadow:0 3px 6px rgba(0,0,0,.25); padding:5px 5px 5px 5px; -webkit-transform:rotate(+2deg); -moz-transform:rotate(+2deg)}
.post img:hover{-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5); -moz-box-shadow:0 3px 6px rgba(0,0,0,.5); -webkit-transform:rotate(-1deg); -moz-transform:rotate(-1deg)}

Selanjutnya Klik Simpan Template dan lihat hasilnya. Arahkan cursor pada gambar di artikel anda dan lihat perubahannya. sampai di sini dulu tutorial cara membuat efek tilt pada gambar. Selamat mencoba dan sukses selalu.