Css ефект масштабування на події :hover

Кльовий приклад, що показує масштабування для події: hover. При наведенні курсору миші кожне зображення повільно збільшується в розмірах, а при втраті фокусу повертається до своїх оригінальних розмірів.

Для цього ефекту використовується набір зображень розміром 400х133 px. Потім вони зменшуються в розмірах коду CSS до 300х100 px і розширюються при наведенні курсору миші. Використовується центрування по горизонталі, і зображення з новим розміром може зіпсувати все, тому застосовується негативне значення поля дорівнює половині ширини.

#container {
width: 300px;
margin: 0 auto;
}
#ex2 img {
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-Moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
#ex2 img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}
Приклад із джерела