http://tradebenefit.ru/plavnoe-uvelichenie-izobrazheniya-pri-navedenii-css
http://xoops.ws/modules/web/article.php?storyid=18

<style type="text/css">
.box {
 overflow:hidden;
 width: 250px;
 height:250px;
 }
.box img {
 -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 transition: all 1s ease-out;
 }
 
.box img:hover{
 -webkit-transform: scale(1.2);
 -moz-transform: scale(1.2);
 -o-transform: scale(1.2);
 transform: scale(1.2);
 }
</style>

<div class="box">//<a href="#"><img width="250" height="250" src="images/img1.jpg" /></a>//</div>
другой лучший только клас добавлять class="img center" или  лево право
<style type="text/css">    
img.img.left{ float:left; margin:5px 15px 5px 0; } 
img.img.right{ float:right; margin:5px 0 5px 15px; } 
img.img.center{ margin:5px auto; display: block; }
img.img { max-height: 320px; max-width: 320px; transition: all 0.3s linear 0s; z-index: 1; 
border: 1px solid #EEE; background: #FFFFFF; padding: 5px; } 
img.img:hover { cursor:pointer; box-shadow: 0 0 5px 5px #eee; border: 1px solid #25A0E3; 
z-index: 10; transition: all 0.3s linear 0.3s; } img.img.left:hover{ transform:scale(2) 
translate(88px, 30px); } img.img.right:hover{ transform:scale(2) translate(-88px, 30px); }
img.img.center:hover { transform:scale(2); } 
</style>