Это можно сделать с помощью ЦСС-фильтра blur. Чтобы заблюрить некий элемент, пишите так:

elem {
  -webkit-filter: blur(3px);
}

Вашу задачу — размыть контент под фенсибоксом — в Сафари и Хроме я бы решил так, кликните на картинку:

Код:

<!-- Подключаем файлы Фенсибокса -->
<link rel="stylesheet" href="fancybox.css" />
<script src="fancybox.js"></script>

<script>
  $(function () {
    var $body = $('body');
    /* Включаем фенсибокс
       для ссылок с классом fancybox */
    $('a.fancybox').fancybox({
      transitionIn: 'elastic',
      transitionOut: 'elastic',
      padding: 0,
      overlayColor: '#000',
      overlayOpacity: .1,
      onStart: function () {
        // Добавляем блюр в начале
        $body.addClass('blured');
      },
      onClosed: function () {
        // Убирем блюр на выходе
        $body.removeClass('blured');
      }
    });
  });
</script>

<style>
  body.blured > * {
    /* Блюр для всех
       непосредственных детей body */
    -webkit-filter: blur(2px);
  }
  #fancybox-loading,
  #fancybox-overlay,
  #fancybox-wrap {
    /* Отмена блюра фенсибокса */
    -webkit-filter: none;
  }

  /* Лёгкий тюнинг */
  .fancybox-bg {
    display: none;
  }
  #fancybox-outer {
    box-shadow: 0 0 50px rgba(0, 0, 0, .5);
  }
  #fancybox-close {
    border: none;
  }
</style>

<ul>
  <li>
    <a class="fancybox" href="1.jpg">
      <img src="1_preview.jpg" />
    </a>
  </li>
</ul>
  

В Эксплорере своя реализация фильтров, вот, например, блюр.