Cara Membuat Gambar Di Header Bergerak Saat Hover dengan css.

Gambar

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    
  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"

12 comments

  1. sob mau tanya boleh gag? sebelumnya mohon maaf yaa kalo aku kluar dari topik. aku mau nanya,cara bikin postingan lama berada di bawah postingan gimana carnya? gag melayang gitu.

    ReplyDelete
  2. Blog Walking :D
    http://cisaga-cyber.blogspot.com/

    ReplyDelete
  3. Izin Share Sob
    http://didil-cyber.blogspot.com

    ReplyDelete
  4. Boleh aja sob ,
    tapi jangan Lupa Sertakan Sumbernya :D

    ReplyDelete
  5. cara biar ukuran gambarnya di kecilin gmana??
    dan yang mana yang harus di rubah
    thx atas jawabannya

    ReplyDelete
  6. ini maksudnya nama kepala headermu apa sob?

    ReplyDelete
  7. ternyata caranya ga terlalu rumit :3

    ReplyDelete
  8. KOK KAGAK BISA YAH DI SAYA,,..?? T_T

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. silahkan kunjungi www.daud-tkj-3.blogspot.com

    ReplyDelete
  11. www.bitacom.asia jual harga lcd led laptop battery keyboard fan adapter

    ReplyDelete

-Berkatalah yang Baik Dan Sopan.

My Instagram