Cara Praktis Membuat Efek Zoom Image Pada Posting Tanpa JavaScript

Dari pada malem malem ga bisa tidur, mendingan update postingan (hehehe . . . .), kali ini Bung Hasta mau posting tentang apa yang tertera pada judul posting ini, yaitu cara praktis membuat zoom image pada posting tanpa javascript.

Kemarin Bung Hasta nyari nyari script untuk membuat efek zoom, tapi ribet banget , ada yang pake javascript, ada yang scriptnya panjang banget, jadinya males buat ditempelin ke blog. Akhirnya Bung Hasta nyari kode CSS yang berhubungan dengan zoom image dan efek transisi, dengan sedikit analisa dan penggabungan kode kode CSS, akhirnya jadi juga scriptnya walaupun sederhana.

Okelah kalo begitu, langsung saja gan cek ke TKP.

• Seperti biasa login dulu ke blogger
• Kemudian pilih Rancangan dan pilih Edit HTML
• Lalu cari kode .post img { (biar cepet pake ctrl+F), kalau sudah ketemu, tambahkan kode dibawah ini di bawah atau di samping kanan kode .post img { tadi
  
  
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;


• Terus tambahkan kode di bawah ini di atas kode ]]></b:skin>
  
  
  .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);
  background-color: #D50100;
  padding: 4px 4px 4px 4px;
  border: 5px solid #FF3891;
  }

Praktis kan??? (hehehe . . .)

Tambahan
Efek transisinya (bukan zoomnya) cuma bisa dilihat dengan browser berbasis Webkit seperti Chrome ataupun Opera, Safari, sedangkan FireFox baru bisa di FF versi 4 beta.

• 
• 
• 
• 
• 
• 
• 

Download Lagu Lagu BLACK DIT DOT

Baca Yang Ini Juga Yah