Gambar Header Bergerak Saat Mouseover

Halo Dark Kage Share Trick Lagi....
Kali Ini Adalah Gambar Header Bergerak Saat Mouseover.
Baiklah Langsung Lihat

1. Masuk ke edit HTML kemudian centang Expand Template Widget

2. Letakkan kode ini diatas ]]></b:skin>

div.MaskedX {
background: url("http://i1273.photobucket.com/albums/y407/maskedx/smss_zps333f1dc9.png") no-repeat ;
-webkit-transition: all 560ms ease-out;
-moz-transition: all 560ms ease-out;
-ms-transition: all 560ms ease-out;
-o-transition: all 560ms ease-out;
transition: all 560ms ease-out;
margin-left:300px;
position:absolute;
height: 200px;
width: 277px;
}
#header-wrapper:hover .MaskedX {
margin-left:490px;
opacity:0;
}
div.MaskedX1 {
background: url("http://i1273.photobucket.com/albums/y407/maskedx/sms_zpsa1544df1.png") no-repeat;
-webkit-transition: all 560ms ease-out;
-moz-transition: all 560ms ease-out;
-ms-transition: all 560ms ease-out;
-o-transition: all 560ms ease-out;
transition: all 560ms ease-out;
margin-left:405px;
position:absolute;
height: 200px;
width: 277px;
opacity:0;
}
#header-wrapper:hover .MaskedX1 {
margin-left:490px;
opacity:1;
}

 

3. Ganti Kode Berwarna Merah Dengan Url Gambar Kamu, Lalu letakkan kode ini dibawah <div id='header-wrapper'>

<div class='MaskedX'/>
<div class='MaskedX1'/>

4. Pratinjau dulu sebelum di save

Sumber : The Masked X

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest