Ниже представлен код на CSS, который плавно увеличивает изображении, при наведении на нее курсора. Если курсор убрать, картинка снова плавно уменьшается.

<style>
.image {
 overflow:hidden;
 width: 300px;
 height:300px;
 }

.image img {
 -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 }
 
.image img:hover{
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 }
</style>

<div class="image"><a href="#"><img width="380" height="250" src="image1.jpg" /></a></div>
<div class="image"><a href="#"><img width="380" height="250" src="image2.jpg" /></a></div>
<div class="image"><a href="#"><img width="380" height="250" src="image3.jpg" /></a></div>