inspekt.js

var color = function(e){
  var $target = $(e.target);

  $target.css({
    'background-color': '#9FC4E7',
    opacity: .5
  })

  $target.children().each(function(i,el){
    $(el).css({
      'background-color': '#C2DDB6',
      opacity: .5
    })
  })
};

var uncolor = function(e){
  var $target = $(e.target);

  $target.attr('style', '');
  $target.children().each(function(i,el){ $(el).attr('style', ''); });
};

var makeEditable = function(editable){
  return function(e){
    e.preventDefault();
    var $target = $(e.target);

    $target.attr('contenteditable', editable);
  };
};

$('*')
  .on('mouseover.inspekt', color)
  .on('mouseout.inspekt', uncolor)
  .on('click.inspekt', makeEditable(true))
  .on('blur.inspekt', makeEditable(false))
  
// $('*').off('.inspekt') to turn off

overlay.js

(function($){
  $.fn.overlay = function() {
    this.each(function() {
      $el = $(this);
      
      $overlay = $("<div class='overlay'></div>");
      $overlay.width(  $el.outerWidth() );
      $overlay.height( $el.outerHeight() );
      
      var style = $el.offset();

      if ($el.css('position') == 'static') {
        var position = 'fixed';
        style.top-= $(document).scrollTop()
      } else {
        var position = 'absolute';
      }

      var style = $.extend(style, {
        'background-color': 'black',
        opacity: 0.5,
        position: position,
        'z-index': 5000
      })
      $overlay.css(style);
      
      $overlay.appendTo('body');
    })
  }
})(jQuery);