Увеличение картинки категории при наведении на нее курсора мыши - [VM2&3] Дизайн, оформление

Добрый день! Ломаю себе голову очень долго как сделать плавное увеличение картинки категории на главной при наведении на нее курсора мыши (или другой эфект - поворот и т.д.) поседством CSS, без сторонних плаинов/модулей. Хотя уже подумываю и о них...
Сайт http://rainoff.com.ua/  Joomla! 2.5, VM2
Перерыв очень много сайтов и форумов нашла ответ но применить его не удается...
img{
    display: block;
    opacity: 1;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 550ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 550ms;
}
img:hover {
    opacity: .9;
    -webkit-transform: scale(1.11,1.17);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 550ms;
    -moz-transform: scale(1.11,1.17);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 550ms;
}

Меняю настройки в vm.css,  Joomla.css
Подскажите, может просто не туда копаю...

 
Все получилось!
Теперь только отредактировать под себя
Добавила класс zoom

.zoom img {
width: 200px;
height: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

.zoom img:hover {
width: 300px;
height: 300px;
-webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
-moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
}

И Вот этот скрипт
все работает))

Если кому пригодится - буду рада!

Все получилось!

и ничего не получилось. Весь сайт прыгает при ховер картинки.
Уберите при ховер высоту и ширину и верните transform: scale(...);