Плавное увеличение изображения при наведении CSS

Довольно частая практика на современных сайтах - плавное увеличение блока с изображением. Как же это сделать с помощью CSS?

Плавное увеличение изображения при наведении курсора CSS

Делим решение задачи на два этапа: разметка html и стили css. Для начала разметим блоки с изображениями внутри:

<div class="box"><a href="#"><img width="250" height="250" src="images/img1.jpg" /></a></div>
<div class="box"><a href="#"><img width="250" height="250" src="images/img2.jpg" /></a></div>

Всем блокам присвоили класс box. Одним из важных его свойств будет overflow:hidden, то есть скрыть всё, выходящее за рамки блока. Будем же увеличивать изображение? Да. Но видима будет только часть, ограниченная блоком.
Это мы разобрали. Переходим к описанию стилей.

.box {
 overflow:hidden;
 width: 250px;
 height:250px;
 }

Всё как и оговаривали - квадратные блоки, схожие по размеру со стандартным, не увеличенным изображением, то тоже 250 на 250.
Свойство overflow:hidden как и говорилось ранее, не позволить выходить за рамки блока при увеличении.
Свойства касающиеся изображений:

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

Тут без CSS3 никуда. Все современные браузеры анимацию отобразят. Нужны параметры transition и transform. Время на анимацию выставляем 1 секунду (1s). Увеличение будет происходить в 1.2 раза. Вы можете изменить на Ваш вкус.
Теперь к примеру работы!

Демонстрация Скачать исходники

Спасибо за внимание!