Kali ini saya akan memberitahu gimana sih membuat gambar header bergerak saar mouse menyorot header .
Penasaran kan , ok langsung saja Cekidot
1. Masuk ke edit HTML kemudian centang Expand Template Widget
2. Letakkan kode ini diatas ]]></b:skin>
3. Lalu letakkan kode ini dibawah <div id='header-wrapper'>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;
}
4. Pratinjau dulu sebelum di save<div class='MaskedX'/>
<div class='MaskedX1'/>