Silahkan anda lihat contoh gambar dibawah ini. Anda bisa coba meletakkan pointer mouse diatas gambar, maka gambar tersebut langsung membesar.

Login Ke Akun Blogger Anda
Pilih Rancangan → Tambah Gadget → HTML/Java Script
Copy semua Kode Dibawah ini dan Simpan :

<style type="text/css">
#zoomimage div {
height:100px;
width:100px;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;}
#zoomimage div:hover {
padding-top:0;
padding-left:0;
padding-top:0;
padding-right:0;
-webkit-transform:scale(3,3);
-moz-transform:scale(3,3);}
#zoomimage img {
border: 3px solid #D8D8D8;
border-style:double;
}
</style>
<center>
<div id="zoomimage">
<div class="hover"><a href=" http://cheatart.blogspot.com/ " target="_blank"><img src="http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/cc.png" width="100" height="100"/></a>
</div></div></center>

Silahkan anda lihat contoh gambar dibawah ini. Anda bisa coba meletakkan pointer mouse diatas gambar, maka gambar tersebut langsung berputar.














Login Ke Akun Blogger Anda
Pilih Rancangan → Tambah Gadget → HTML/Java Script
Copy semua Kode Dibawah ini dan Simpan :

<style>#tejahtcganteng{ -o-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;}#tejahtcganteng:hover{ -o-transform: scale(1.5) rotate(720deg) translate(0px);
-moz-transform: scale(1.5) rotate(720deg) translate(0px);
-webkit-transform: scale(1.5) rotate(720deg) translate(0px);}#ganteng a:hover{transition: all 0.5s;-moz-transition: all 0.5s;}</style>
<div style="text-align: center;">
<div id="tejahtcganteng">
<a href=" http://cheatart.blogspot.com/ " target="_blank" title="^_^"><img height="203" src="http://i1270.photobucket.com/albums/jj606/hudiart/slidesow/CA-white.png" style="border: 0px;" width="200" /></a></div></div><br/>

Oc.....!!!