Membuat Efek Image Hover Zoom ~ -:: Bansai IrEnK ::-

Pada kesempatan kali ini irenk ingin memberikan tutorial blogger lagi, setelah lama ngga posting tutor blogger. nah disini saya ingin memberikan 'Membuat Efek Img Hover Zoom pada semua gambar Posting' maksudnya disini Image/gambar pada saat disorot, maka akan menimbulkan efek Pembesaran pada gambar..

Trik ini murni dari efek CSS, LIHAT CONTOHNYA DISINI. perhatikan pada bagian Foto About me.

Jika sobat ingin mencobanya langsung saja ikuti langkah berikut :
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. cari code : .img profil{ (Jika tidak ketemu maka letakkan kode berikut diatas kode ]]></b:skin> )
Lalu hapus kode diatas, lalu ganti dengan kode berikut :

.post img{border-radius: 8px; -o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in; -moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in; -webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in; opacity: 0.6; transform:rotate(3deg); -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); -o-transform:rotate(3deg); background:transparent; padding:4px} .post img:hover { opacity: 1.0; -o-transform: rotate(0deg) scale(1.8) translate(35px, 10px); -moz-transform: rotate(0deg) scale(1.8) translate(35px, 10px); -webkit-transform: rotate(deg) scale(1.8) translate(35px, 10px); -o-transition: margin-left 1.5s ease-in 0.1s, margin-top 1.0s, -o-transform 2.5s ease-out 1.4s, opacity 1s ease-in 1s; -moz-transition: margin 1.5s ease-in 0.1s, -moz-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s; -webkit-transition: margin 1.5s ease-in 0.1s, -webkit-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s; }

Sobat dapat mengedit code CSS diatas sesuka anda,

5. Save Template,..

Sekarang lihat hasilnya.

Selamat mencoba!