[bes]

<div id="div1">
  <img 

src="http://legal2b.ru/bitrix/templates/legal2b_second/images/articles/registration/limited_01_small.jpg">
  <img 

src="http://legal2b.ru/bitrix/templates/legal2b_second/images/articles/registration/limited_02_small.jpg">
  <img 

src="http://legal2b.ru/bitrix/templates/legal2b_second/images/articles/registration/limited_03_small.jpg">
</div>

<div id="div2" style="position: relative">
</div>

<script>
window.onload = function () {//onload begin
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');

  div1.onmouseover = function (e) {//onmouseover begin
    e = e || event;
    var target = e.target || e.srcElement;
    var count = 457;
    var step = 6;
    var coof = 1;

    if (target.parentNode == div1) {//if begin
      var img = document.createElement('img');
      img.src = target.src.replace('small', 'big');
      img.style.position = 'absolute';
      img.style.left = '0px';
      img.style.top = '0px';
      div2.appendChild(img);
      img.width = 0;

      for (var i = 0; i < count; i += step) {
        setTimeout(function () {img.width += step}, i*coof);
      }

      target.onmouseout = function () {
        for (var i = 0; i < count; i += step) {
        setTimeout(function () {img.width -= step; if (img.width <= 0) div2.removeChild(img)}, i*coof);
        }
      }

    }//if end

  }//onmouseover end
  
}//onload end
</script>