Gambar Bergeser Saat MouseOver

Selamat malam semua

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. Lalu letakkan kode ini dibawah <div id='header-wrapper'>

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

4. Pratinjau dulu sebelum di save

Sumber : http://maskedx.blogspot.com/2013/04/gambar-header-bergeser-saat-mouseover.html

Gambar Bergeser Saat MouseOver 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.

Share This To :

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati

Anda baru saja membaca artikel yang berkategori Tutorial Blog dengan judul Gambar Bergeser Saat MouseOver. Anda bisa bookmark halaman ini dengan URL http://jamesb-s.blogspot.com/2013/10/gambar-bergeser-saat-mouseover.html. Terima kasih!

Ditulis oleh: Unknown - Selasa, 01 Oktober 2013