Pernahkah kalian saat berkunjung ke blog seseorang, tiba-tiba gambar membesar dengan sendirinya saat cursor melewati gambar tersebut? Kalau belum pernah lihat, coba arahkan cursor kalian ke gambar yang di atas. Nah kali ini gue mau share cara membuat efek "Gambar Membesar Saat Disentuh Oleh Cursor". Efek ini biasa disebut dengan "Image Zoom Effects" atau "Hover Zoom Smooth Effects". Langkah yang harus kalian lakukan adalah:
- Masuk ke account blogger kalian
- Pilih Template --> Edit HTML
- Cari kode ]]></b:skin>, jika tidak ketemu gunakan fitur Find (CTRL + F)
- Kalau sudah ketemu, letakkan kode berikut di atas ]]></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); }
- Simpan Template kalian.
Selamat Mencoba, dan Salam Bangkan :D
Post a Comment