Дизайн, дизайн, дизайн. Хороший дизайн — это весьма обстоятельство, которое нужно учитывать при разработке сайта. Именно с него, как правило, у посетителей формируется первое впечатление о вашем проекте.
Однако, когда вы приносите интерактив на страницы — у пользователя возникает неподдельный интерес, эдакое естественное любопытство! Пользуйтесь этим в своих будущих проектах. И пытайтесь подавать дизайн и интерактив вместе, так шансов у Вас гораздо больше.
Руководствуясь этими словами я и решил действовать.
Унылую картинку мы сейчас расшевелим.

Скажу сразу, статья ориентирована на новичков в JQuery.
Итак, начнем от обратного, хочу чтобы итог был таков:
результат

но это результат, наша задача — использовать и понимать JQuery. На чем и заострим внимание:
А что собственно нам нужно?
1) разбить картинку на квадратики,
2) Cделать скругленные углы
3) Хочу! хочу чтоб «это» отзывалось на мои действия.

Ну что-ж, обо всем по порядку:
Сначала сделаем скелет страницы:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.  <title>JQuery Box</title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=utf8">
  6.  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  7.  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
  8. <!--подключаем UI так как используем метод animate-->
  9. <script type="text/javascript">
  10. jQuery(document).ready(function() {
  11. // Здесь располагается код, который будет выполняться при загрузке DOM страницы
  12. });
  13. </script>
  14. <style type="text/css">
  15. *{margin:0; padding:0; border:0px solid red;}
  16. </style>
  17. </head>
  18. <body>
  19. <div align="center"><!-- центрируем -->
  20.   <div id="image_top" class="image_0">
  21.     <!-- сюда будем вставлять блоки, замостим ими все пространство рисунка -->
  22.   </div>
  23. </div>
  24. </body>
  25. </html>
* This source code was highlighted with Source Code Highlighter.
В нем ничего особенного нет. Многие текстовые редакторы дают такую же «пустую» html страницу.

Теперь разместим в «style» блок
#image_top {width: 780px; height: 230px;} /* Определяем размеры блока рисунка */<br>.image_0{ background: url('background.jpg');} /* создаем класс, при необходимости сможем изменить background блока, просто поменяв данный либо сам класс, либо его атрибуты */<br><br>* This source code was highlighted with Source Code Highlighter.

творим

Далее, замостим её сверху квадратными блоками, как видите на рисунке сверху, только грани эти естественно — невидимые.
Но делать мы это будем после загрузки DOM, а сейчас только пропишем стили для этих блоков:

div.overlay_box { width: 78px; height:78px; float:left; background: url('overlay_cube_78.png');} <br>/* Задаем размеры "кирпичикам", что будут мостить наш рисунок, В данном случае мы нарисовали квадраты, со скругленными уголками */<br>div.overlay_box_in {background: white; width: 78px; height:78px; display:block; opacity:0; filter: alpha(opacity=00);}<br>/* задаем параметры для блока, вложенного в блок с рисунком png. */<br><br>* This source code was highlighted with Source Code Highlighter.

По сути мы в один блок вписываем другой, с таким фоновым рисунком
кубик
Да, png — штука удобная. Здесь мы рисуем квадрат с закругленными углами.

В принципе, мы можем нарисовать что душе угодно: звездочки, машинки, силуеты…
Размер повторяющихся блоков подбираем таким образом, чтобы они вписались в блок #image_top, иначе по краям останутся эдакие обрубки.
В итоге получим:

замостим

а теперь нам нужно предусмотреть как картинка будет реагировать на наши действия.
Самым разумным предложением — это чтобы наши квадраты реагировали на мышь. Когда мышь — располагается в зоне квадрата, он должен изменять свое состояние.
В нашем случае сделаем так, чтобы квадрат целиком был белым.

Анимация

Добъемся этого с помощью hover.
Не забываем вернуть все к исходному состоянию.
А вот, собственно и ВЕСЬ код этого эффекта:
jQuery(document).ready(function() {
  for (var i=0; i<30; i++) // в нашу картинку поместятся 30 таких "боксов"
    { $('#image_top').append('<div class="overlay_box"><div class="overlay_box_in"></div>');
    }
  $('div.overlay_box_in').hover(  
    function(){$(this).stop().css('opacity','0.9')},
// Первая функция делает блок, над которым сейчас находится мышь практически непрозрачным - белым
// Для того чтобы не создавалось «очереди», когда мышь проходит снова над квадратом, а анимация еще не завершилась, добавляем в начало stop().
    function(){$(this).animate({opacity: 0.0},1500, 'linear')}
// а здесь вторая функция (вызываемая после того как мышь покинет текущий квадрат) делает блок снова прозрачным
  );

});


* This source code was highlighted with Source Code Highlighter.

Вот и все.
DEMO здесь
Все целиком можете скачать отсюда:
Надеюсь, Вам помогла эта статья в понимании Jquery.