Cara Membuat Efek Gambar atau Photo Memutar dan Membesar saat di sorot Mouse | 2012

Baiklah sobat semua kali ini saya akan share tentang bagaimana Cara Membuat Efek Gambar atau Photo Memutar dan Membesar saat di sorot Mouse | 2012 dengan menggunakkan css, oke tidak usah panjang lebar...

Seperti ini lah demo nya sob coba disorot gambarnya dengan mouse..:

Jika Sobat ingin Memasang di blog sobat Silakan Ikuti Langkah-langkah berikut ini :

1. Login Ke Akun Blog sobat
2. Pilih Rancangan/design Lalu Pilih EDIT HTML (dan jangan lupa untuk mencentang kolom expand template widget )
3.  Copas/Letakan kode berikut tepat diatas kode </head>

#infoteknomediamemutar{ -o-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;}#infoteknomediamemutar:hover{ -o-transform: scale(1.5) rotate(720deg) translate(0px);
-moz-transform: scale(1.5) rotate(720deg) translate(0px);
-webkit-transform: scale(1.5) rotate(720deg) translate(0px);}#memutar a:hover{transition: all 0.5s;-moz-transition: all 0.5s;}

Atau Kalo Sobat Tidak Mau Pusing !!! kode/css diatas bisa dimasukan dalam gadget HTML/Javascript sob..

   4 . SimpanTemplatenya


CARA PEMAKAIANNYA

Tambahkan <div id='infoteknomediamemutar'> Letakkan kode/ script dari Gambar sobat </div> diakhiri 
Contoh :

<div id="infoteknomediamemutar">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i567.photobucket.com/albums/ss112/assisan_2009/Naruto%20PNG/naruto.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://i567.photobucket.com/albums/ss112/assisan_2009/Naruto%20PNG/naruto.png" width="115" /></a></div>
</div>

Begitulah Cara Pemakaiannya sob...^_^..

CATATAN : Sobat Semua Bisa mengubah efek membesarnya dengan cara Mengubah Ukuran Yg Saya sudah Tandai dEngan Warna Hijau Tua(1.5)

Contoh : 0.9   1.0  atau membesarkannya lagi 2.0 2.5 DST

Semoga Bermanfaat Untuk Sobat Semua....,

Thank's...^_^..
Artikel Terkait di Bawah posting