Membuat Hover Image CSS3 Pada Blog (Seperti Blog ini )

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin> Lalu simpan kode di bawah ini diatas kode tadi :

.hoverphoto img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7; /
margin: 0 10px 5px 0;
position: relative;
padding: 3px;
width: 125px;
height: 125px;
-moz-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-moz-transform: rotate(-15deg);
-webkit-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-15deg);
}

.hoverphoto img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
z-index: 2;
position: relative;
-moz-transform: rotate(0deg);
-moz-transform: scale(1.25);
-webkit-transform: rotate(0deg);
-webkit-transform: scale(1.25);
}

7. Save

8. Cara penggunaannya

Masukkan kode berikut pada edit html posting atau pada widget html/java script :

<div class="hoverphoto">
<img height="320" src="URL GAMBAR ANDA" width="240" />
<img height="320" src="URL GAMBAR ANDA" width="240" /></div>