Плавное увеличение изображения при наведении на чистом CSS3

Html

<div class="image"><a href="#"><img width="380" height="250" src="images/im1.jpg" /></a></div>
 <div class="image"><a href="#"><img width="380" height="250" src="images/im2.jpg" /></a></div>
 <div class="image" ><a href="#"><img width="380" height="250" src="images/im3.jpg" /></a></div>

CSS

.image {
 overflow:hidden;
 width: 380px;
 height:250px;
 }

и правила самих изображений

.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);
 }

Демо тут http://beloweb.ru/demo/uvimg/