Efek Transisi Gambar Untuk Blogger dengan CSS

Apakah anda adalah seorang blogger yang sedang menawarkan space iklan di blog anda? atau anda adalah seorang penjual untuk sebuah produk di blog anda? maka cara ini mungkin dapat meningkatkan jumlah klik untuk iklan anda. Dengan memberi efek transisi seperti terkupas ini maka anda akan memberi kesan unik untuk space iklan anda. Berikut demo dan tutorialnya.

Sedangkan Demo nya bisa anda lihat disini

Adapun caranya seperti berikut :

1. Masuk ke akun blogger, lalu klik Layout - Add Gadget - HTML/Javascript


2. Lalu masukkan kode berikut:



<style type="text/css">

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 450px; 
height: 300px; 
}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease; 
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s 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;
}

</style>

<a class="nowandthen" href="http://azumacorner.blogspot.com/">
 <img alt="" src="http://1.bp.blogspot.com/-5cpkCPis1x8/UbArJF1PBuI/AAAAAAAAFhM/3leauMiv55I/s1600/pasang+iklan1.jpg" />
 <img alt="" src="http://4.bp.blogspot.com/-4-qBBKX6RjU/UbArHndd3kI/AAAAAAAAFhE/2qYdFWdwQbY/s1600/pasang+iklan2.jpg" />
</a>



3. Silahkan edit URL gambar dengan gambar yang anda inginkan. Untuk mengubah ukuran, silahkan edit angka width dan height

Demikian informasi cara membuat Efek Transisi Gambar Untuk Blogger dengan CSS. Semoga bermanfaat.