Gambar Header Bergeser saat Mouseover
5/05/2013
By
Agung DeidaraRyu
Blogger
0
komentar
1. Masuk ke edit HTML kemudian centang Expand Template Widget
2. Letakkan kode ini diatas ]]></b:skin>
Semoga Bermanfaat.
2. Letakkan kode ini diatas ]]></b:skin>
div.MaskedX {3. Lalu letakkan kode ini dibawah <div id='header-wrapper'>
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;
}
<div class='MaskedX'/>4. Pratinjau dulu sebelum di save
<div class='MaskedX1'/>
Semoga Bermanfaat.
0 komentar:
Syarat Berkomentar :
-Coment yang sopan !!
-Tidak mengandung kata2 Negatif.
-Dilarang Menghina dll.
Salam DND Ryujinki (^_\ \