Membuat Efek Img Hover Zoom pada semua gambar Posting

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


Trik ini murni dari efek CSS


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 : .post img{ (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 sobat::

5. Terakhir tinggal Save Template sobat,.. 







Selamat mencoba dan semoga bermanfaat

Sobat sedang membaca artikel tentang Membuat Efek Img Hover Zoom pada semua gambar Posting dan sobat bisa menemukan artikel Membuat Efek Img Hover Zoom pada semua gambar Posting ini dengan url http://teckno8.blogspot.com/2013/01/membuat-efek-img-hover-zoom-pada-semua_16.html, sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat Efek Img Hover Zoom pada semua gambar Posting ini sangat bermanfaat bagi temanteman sobat, namun jangan lupa untuk meletakkan link Membuat Efek Img Hover Zoom pada semua gambar Posting sumbernya.

Related Post: