0 Membuat Efek Img Hover Zoom pada semua gambar Posting

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

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://bantenxp-2.blogspot.com/2011/11/membuat-efek-img-hover-zoom-pada-semua.html, sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat Efek Img Hover Zoom pada semua gambar Posting ini sangat bermanfaat bagi teman-teman sobat, namun jangan lupa untuk meletakkan link Membuat Efek Img Hover Zoom pada semua gambar Posting sumbernya. Trims

Tweet

Pada kesempatan kali ini Dicky 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' maksud.y 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 Gambar.


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 anda,


5. Save Template,..

Sekarang lihat hasilnya.

Selamat mencoba! 

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Membuat Efek Img Hover Zoom pada semua gambar Posting. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://bantenxp-2.blogspot.com/2011/11/membuat-efek-img-hover-zoom-pada-semua.html" target="_blank">Membuat Efek Img Hover Zoom pada semua gambar Posting</a>

URL

Code For Forum

HTML Code <a href='http://bantenxp-2.blogspot.com/2011/11/membuat-efek-img-hover-zoom-pada-semua.html' target='_blank'>Membuat Efek Img Hover Zoom pada semua gambar Posting</a>