Trik css Efek Gambar Beda Bentuk Ragam

Bookmark and Share
Trik css Efek Gambar Beda Bentuk Ragam |Beberapa Macam Bentuk css img dalam 1 posting, Kali ini kan ane share trik css " membuat efek berbeda pada gambar"
Trik css desktop kali ini tentang membuat efek gambar yang berbeda - berbeda di dalam satu kolom postingan. mungkin sahabat suka menggunakan banyak gambar dalam satu postingan nah trik kali ini sangat cocok diterapkan di blog agan, dengan css ini setiap gambar - gambar yang ada akan menghasilkan efek gambar yang ber beda - beda satu sama yg lain .Berikut penjelasan nya

Trik css Efek Gambar Beda Bentuk Ragam


Tata cara nya:

  1 Tulis kode html gambar ini di post

  <*img class="gambar_1" src="url gambar" />  <*img class="gambar_2" src="url gambar" />  <*img class="gambar_3" src="url gambar" /> 

 atau  gambar menggunakan link

   <*a href="url link yg dituju"><*img class="gambar_1" src="url gambar" /><*a href="url link yg dituju">    <*img class="gambar_2" src="url gambar" />     <*a href="url link yg dituju"><*img class="gambar_3" src="url gambar" />

"hapus tanda (*)

2 Terus  buat code script css seperti dibawah ini dan terap kan di tema desktop:

   .gambar_1:hover { -moz-transform:scale(0.9); -webkit-transform:scale(0.9); -o-transform:scale(0.9);  }     .gambar_2:hover  { -moz-transform:scale(1.2); -webkit-transform:scale(1.2);-o-transform:scale(1.2);}    .gambar_3:hover  { border-radius: 25% 25%;}

Menerapkan code css nya masuk ke  Dashboard   > tema desktop > edit  > paste script css (gambar:hover)> save

Ket efek : gambar 1- akan menciut gambar 2- akan ngezoom dan gambar 3- akan mengkerut

Demikian lah efek hover kali ini semoga ber manfaat.

Cukup mudah bukan, hanya sentuhan mouse klik kiri - klik kanan jos pasang sana sini beres deh xixixi ....

Artikel fafan suka blogspot.com ini tentang Trik css Efek Gambar Beda Bentuk Ragam


Backlink here..

{ 0 komentar... Views All / Send Comment! }

Posting Komentar