Сообщение # 1 | 19:17:10 21 Мар 2015
Здравствуйте, помогите дополнить код:

CSS:
Код
.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

Меня это устраивает, но я бы хотел, чтобы увеличение происходило не по центру, а в том месте куда направлен курсор, и ещё чтобы при движении курсора картинка тоже двигалась внутри этого блока, типо эффект параллакса.

Можно ли это сделать с помощью CSS или надо писать скрипт?