Efek Kupasan Gambar
Gerakkan mouse ke gambar dibawah
Cara pemasangan
1.Login ke akaun blogger anda.
2.Klik Template --> Edit HTML.
3.Cari kod ]]></b:skin>
4.Copy dan paste kod dibawah diatas kode ]]></b:skin> tersebut
Untuk mengaktifkan gambar yang mempunyai efek kupasan,korang perlu guna kod ini
Cara pemasangan
1.Login ke akaun blogger anda.
2.Klik Template --> Edit HTML.
3.Cari kod ]]></b:skin>
4.Copy dan paste kod dibawah diatas kode ]]></b:skin> tersebut
a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 550px;
height: 434px;
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}
a.nowandthen img:nth-of-type(2){z-index: 1;}
a.nowandthen:hover img:nth-of-type(1){clip: rect(0,0,434px,0);
opacity: 0;
}
a.nowandthen.alt{ width: 300px;height: 354px;}
a.nowandthen.alt img{clip: rect(0,300px,354px,0);}
a.nowandthen.alt:hover img:nth-of-type(1){clip: rect(0,0,354px,0);}
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 550px;
height: 434px;
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}
a.nowandthen img:nth-of-type(2){z-index: 1;}
a.nowandthen:hover img:nth-of-type(1){clip: rect(0,0,434px,0);
opacity: 0;
}
a.nowandthen.alt{ width: 300px;height: 354px;}
a.nowandthen.alt img{clip: rect(0,300px,354px,0);}
a.nowandthen.alt:hover img:nth-of-type(1){clip: rect(0,0,354px,0);}
Untuk mengaktifkan gambar yang mempunyai efek kupasan,korang perlu guna kod ini
<a class="nowandthen">
<img alt="efek kupasan" src="http://urlgambarkorang.jpg"/>
<img alt="efek kupasan" src="http://urlgambarkorang.jpg"/>
</a>
Gantikan http://urlgambarkorang.jpg dengan url gambar korang
<img alt="efek kupasan" src="http://urlgambarkorang.jpg"/>
<img alt="efek kupasan" src="http://urlgambarkorang.jpg"/>
</a>
2 ulasan
menarik nih..
Reply:D
Memang menarikkan,sesuai untuk blog fotografi :)
ReplyNota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.