Membuat Effects Image Hover

Postingan kali ini saya hanya ingin membuat trik sederhana membuat effect hover pada image dengan bantuan CSS. Seperti apa effect yang terlihat, silahkan arahkan pointer/mouse pada sample image dibawah ini:

gimana..?? tertarik..!!!
Kalo tertarik silahkan baca lebih lanjut..
Nah cara menambahkan effect hover pada image untuk template blogger sebagai berikut:

Setelah sign in pada account blogger kalian>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

Tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

ImgD{
float:left;}.rad10R{float:right;}
.rad10C,.rad10C0{
float:none;display:block;margin:0 auto;
}
.ImgD:hover {
border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;
box-shadow:-2px -2px 8px #03b5ff, 2px 2px 20px #03b5ff;
-moz-box-shadow:-2px -2px 8px #03b5ff, 2px 2px 20px #03b5ff;
-webkit-box-shadow:-2px -2px 8px #03b5ff, 2px 2px 20px #03b5ff;
-o-transform:scale(1.4) translate(40px,40px) rotate(0deg);
-moz-transform:scale(1.4) translate(40px,40px) rotate(0deg);
-webkit-transform:scale(1.4) translate(40px,40px) rotate(0deg);
background:#555;-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-out;
-webkit-transition: all 1.2s ease-in;
}

Simpan Template

Cara cepat pencarian kode ]]></b:skin> Tekan CTRL + F atau F3

Dan untuk membuat Image hover melq tinggal copy kode di bawah ini dan letakan di postingan melq

<img class="ImgD" height="162" id="#" src="http://i1094.photobucket.com/albums/i447/kang-da2ng/black.jpg" style="height: 220px; width: 320px;" width="400" />

Untuk URL http://i1094.photobucket.com/albums/i447/kang-da2ng/black.jpg ganti dengan URL gambar melq sendiri

Dan lihat hasilnya..
Semoga bermanfaat

Original from http://joesetapart.blogspot.com/2011/06/membuat-effects-image-hover.html#ixzz1f5YZfWzU
Created design by : Blog Acak-Acakan
Under Creative Commons License: Attribution Non-Commercial