<script src="http://up-script.ru/Script/4/jquery-1.3.1.min.js"></script>   
<script src="http://up-script.ru/Script/4/jquery.easing.1.3.js"></script>

<script>   
$(document).ready(function() {
   var style_in = 'easeOutBounce';
   var style_out = 'jswing';
   var speed_in = 1000;
   var speed_out = 300;   
   var neg = Math.round($('.qitem').width() / 2) * (-1);   
   var pos = neg * (-1);   
   var out = pos * 2;
   $('.qitem').each(function () {
   url = $(this).find('a').attr('href');
   img = $(this).find('img').attr('src');
   alt = $(this).find('img').attr('img');
   $('img', this).remove();
   $(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
   $(this).children('div').css('background-image','url('+ img + ')');
   $(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});   
   $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});   
   $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});   
   $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});   
   }).hover(function () {
   $(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});   
   $(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});   
   $(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});   
   $(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});   
   },
   function () {
   $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});   
   $(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});   
   $(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});   
   $(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});   
   }).click (function () {
   window.location = $(this).find('a').attr('href');   
   });
});
</script>

.qitem {width:125px;height:125px;border:4px solid #222;margin:2;background: url('http://up-script.ru/Script/4/bg.gif') no-repeat;overflow:hidden;cursor:hand;position:relative;float:left;cursor:pointer;}
.qitem img {border:0;position:absolute;z-index:200;}
.qitem .caption {position:absolute;z-index:0;color:#ccc;display:block;}
.qitem .caption h4 {font-size:14px;padding:10px 5px 0 8px;margin:0;color:#CCD718;}
.qitem .caption p {font-size:12px;padding:3px 5px 0 8px;margin:0;}
.topLeft, .topRight, .bottomLeft, .bottomRight {position:absolute;background-repeat: no-repeat;float:left;}
.topLeft {background-position: top left;}   
.topRight {background-position: top right;}   
.bottomLeft {background-position: bottom left;}   
.bottomRight {background-position: bottom right;}

<div class="qitem">   
<a href="http://up-rise.ru/"><img src="http://up-script.ru/Script/4/cbfd05f8effc.png" width="125" height="125"/></a>   
<span class="caption"><h4>Up-Rise.Ru</h4><p>Макет и Верстка, разработка сайтов, только для uCoz конструктора.</p></span>   
</div>   
     
<div class="qitem">   
<a href="http://up-script.ru/"><img src="http://up-script.ru/banner/125X125-v3.png" width="125" height="125"/></a>   
<span class="caption"><h4>Up-Script.Ru</h4><p>Только новые, и только уникальные скрипты для uCoz системы.</p></span>   
</div>