Cara Membuat Gambar Di Header Bergerak Saat Hover dengan css

Banyak Orang Tanya2 Sama Gue, Cara Buat gambar Di Header bergerak saat hover, capek we jawabnya ..

lebih baik gue share aja ...

Cekibrot:

1. Login blogger Kalian.
2. Trus Masuk Ke Template.
3. jangan Lupa beri centang pada    Expand Template Widget
4. Cari kode  ]]></b:skin>, Pastekan Kode Di Bawah Ini Tepat Di atas Kode Tadi.

div.SCheader {
-moz-transition: all 0.75s ease-in-out 0s;
background: url("http://www.deviantart.com/download/209975142/luffy_render_by_namibekkklein-d3h0huu.png") no-repeat;
margin: 0px;
position: absolute;
}
div.SCheader {
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 900ms ease-out;-moz-transition: all 900ms ease-out;-ms-transition: all 900ms ease-out;-o-transition: all 900ms ease-out;transition: all 900ms ease-out;
background: url("http://www.deviantart.com/download/209975142/luffy_render_by_namibekkklein-d3h0huu.png") no-repeat;
margin-left: 100px;
margin-top: 0px;
position: absolute;
height: 520px;
width: 540px;
}
div.SCheader :hover {
-webkit-transition: all 900ms ease-out;-moz-transition: all 900ms ease-out;-ms-transition: all 900ms ease-out;-o-transition: all 900ms ease-out;transition: all 900ms ease-out;
background: url("http://www.deviantart.com/download/209975142/luffy_render_by_namibekkklein-d3h0huu.png") no-repeat;
}
#header-wrapper:hover .SCheader {
margin-left: 400px;
}

Ket :

 orange => URL gambar Anime Kamu.

 Hijau => Nama Kepala Headermu. 

"SELANJUTNYA ATUR SENDIRI :P"

 4.oke sekarang kita aktifkan cssnya,Sekarang Cari kode

<div id='header-wrapper'>

5. Pastekan Kode Di bawah ini Di Bawah kode Di atas

 <div class='SCheader'/>

5. Klik PRATINJAU, untuk melihat jadi apa nggak, Kalau jadi Klik Save.

"BILA ADA YG SALAH TANYAKAN LANGSUNG DI KOMENTAR"

Sumber Artikel Dari: http://satria-cyber.blogspot.com/2013/01/cara-membuat-gambar-di-header-bergerak.html#ixzz2Hwp3k7B1