Землетрясение при наведении

[Parampam]

Доброго времени суток, уважаемые! Очень прошу Вас помочь добраться до получение эффекта трясучки картинки, при наведении на неё. Примерную идею можно увидеть тут - http://ag.ru. Если получится что-то прям такое же - буду только очень рад.

Вроде как можно это реализовать с помощью http://script.aculo.us. Но что-то не получается.

Заранее спасибо!

[Deff]

<style>
.Tryas {
 position:relative;
 overflow:hidden;
 border:1px solid red;
}
.ImgWrap {
 position:absolute;
 width:120%;
 height:120%;
 margin-left:-10%;
 margin-top:-10%;
}
</style>

<!--ширину-высоту "Tryas" выставляем по картинке уменьшенной в 1.2раза-->
<div class="Tryas" style="width:200px;height:170px;">
   <div class="ImgWrap" onmouseover="Tryas(this)" onmouseout="End_Tryas(this)">
<img src="http://javascript.ru/img/webstorm.png" height="100%" width="100%"/>
   </div>
</div>

<script type="text/javascript">
function RandomStyle(obj,Delta) {
 obj.style.left=Math.round(Math.random()*(Delta)-Delta/2)+'%';
 obj.style.top=Math.round(Math.random()*(Delta)-Delta/2)+'%';
}

var timerId_01;
function Tryas(obj) {
  timerId_01 = setInterval( function() {
     RandomStyle(obj,10)	//10 - максимальная амплитуда раскачки в % по X и Y;
  }, 20);			// 20 - Период раскачки - ms;
}

function End_Tryas(obj) {
  clearInterval(timerId_01)
  obj.style.left=0;
  obj.style.top=0;
}
</script>

<style>
.Tryas {
 display:inline-block;
 position:relative;
 overflow:hidden;
 border:1px solid red;
}
.ImgWrap {
 position:absolute;
 width:140%;
 height:140%;
 margin-left:-20%;
 margin-top:-20%;
transition-property:left,top;
-webkit-transition-property:left,top;
-moz-transition-property:left,top;
-o-transition-property:left,top;
-ms-transition-property:left,top;

transition-duration: 0.96s;
-webkit-transition-duration: 0.96s;
-moz-transition-duration: 0.96s;
-o-transition-duration: 0.96s;
-ms-transition-duration: 0.96s; /* IE9+ */
}
</style>

<div class="Tryas" style="width:200px;height:170px;">
   <div class="ImgWrap" onmouseover="Tryas(this)" onmouseout="End_Tryas(this)">
<img src="http://javascript.ru/img/webstorm.png" height="100%" width="100%"/>
   </div>
</div>
<div class="Tryas" style="width:256px;height:271px;">
   <div class="ImgWrap" onmouseover="Tryas(this)" onmouseout="End_Tryas(this)">
<img src="http://www.ag.ru/i/ts/88/3678ee7459fa1c8a314b27bb7f1de3c9.jpg" height="100%" width="100%"/>
   </div>
</div>
<div class="Tryas" style="width:256px;height:271px;">
   <div class="ImgWrap" onmouseover="Tryas(this)" onmouseout="End_Tryas(this)">
<img src="http://www.ag.ru/i/ts/87/e58cd097c9b7934ec4a5ba46367a710a.jpg" height="100%" width="100%"/>
   </div>
</div>

<script type="text/javascript">
function RandomStyle(obj,Delta) {
 obj.style.left=Math.round(Math.random()*(Delta)-Delta/2)+'%';
 obj.style.top=Math.round(Math.random()*(Delta)-Delta/2)+'%';
}

var timerId_01;
function Tryas(obj) {
  timerId_01 = setInterval( function() {
     RandomStyle(obj,65)	//40 по X и Y;
  }, 150);			// 200 - Период раскачки - ms;
}

function End_Tryas(obj) {
  clearInterval(timerId_01)
  obj.style.left=0;
  obj.style.top=0;
}
</script>