Здравствуйте, помогите дополнить код:
Код
.str {
overflow:hidden;
}
.str img {
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.str img:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
Код изображения:
Код
<div class="str"><img src="ссылка"></div>
При наведении курсора на картинку, она увеличивается внутри блока не выходя за границы.
Вот демо - _http://onlinecomics.ru/index/0-105
Помогите сделать так, чтобы увеличение происходило не по центру, а в том месте куда направлен курсор, и ещё чтобы при движении курсора картинка тоже двигалась внутри этого блока, типо эффект параллакса.