<script src="http://webo4ka.ru/Ucoz4/jquery-1.3.1.min.js"></script>   
   <script src="http://webo4ka.ru/Ucoz4/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://webo4ka.ru/Ucoz4/effekt_dli_reklami125.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://webo4ka.ru/"><img src="http://webo4ka.ru/Ucoz4/effekt_dli_reklami125cbfd05f8effc.png" width="125" height="125"/></a>   
   <span class="caption"><h4>webo4ka.ru</h4><p>Макет и Верстка, разработка сайтов, только для uCoz конструктора.</p></span>   
   </div>   
     
   <div class="qitem">   
   <a href="http://webo4ka.ru/"><img src="http://webo4ka.ru/Ucoz4/effekt_dli_reklami125125X125-v3.png" width="125" height="125"/></a>   
   <span class="caption"><h4>webo4ka.ru</h4><p>Только новые, и только уникальные скрипты для uCoz системы.</p></span>   
   </div>