CSS Transform

CSS Code

.scale_wrap {
 border: 1px solid #aaa;
 margin: 10px;
 padding: 5px;
 width: 150px;
 background: #ddd;
}
a.scale img {
 width: 150px;
}
a.scale:hover img {
 -webkit-transform: scale(1.5);
 -moz-transform: scale(1.5);
 -o-transform: scale(1.5);
 transform: scale(1.5);
}
  

HTML Code

<div class="wrap_scale">
 <a href="image_scale.html" class="scale"><img src="beach.jpg" alt="bali beach" /></a>
</div>
  

Hasilnya

Scale transform in and border radius

Contoh:

a#scale_in img {
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
}
a#scale_in:hover img {
 -webkit-transform: scale(0.5);
 -moz-transform: scale(0.5);
 -o-transform: scale(0.5);
 transform: scale(0.5);

 -webkit-box-shadow: 0px 0px 35px rgba(0,0,0,0.4);
 -moz-box-shadow: 0px 0px 35px rgba(0,0,0,0.4);
 -o-box-shadow: 0px 0px 35px rgba(0,0,0,0.4);
 box-shadow: 0px 0px 35px rgba(0,0,0,0.4);
 -webkit-border-radius: 360px;
 -moz-border-radius: 360px;
 -o-border-radius: 360px;
 border-radius: 360px;
}
  

HTML Code

<a href="" id="sclale_in"><img src="robots" /></a>
  

Hasilnya