best HTML slicing helper ever: show the reference design as non-blocking overlay. Webkit-Browser only.

html_slicing_overlay.css

/* =============================================================================
   show the reference design as non-blocking overlay. 
   NOTE: Webkit-Browser only. Reference image needs to be flipped as 
         »box-reflect: right« & transform: scaleX(-1) do not play together.
   ========================================================================== */

body:after {
  content:          '';
  display:          block;
  
  position:         absolute;
  top:              0;
  left:             -100%;
  width:            100%;
  height:           2000px;

  -webkit-box-reflect: right;
  opacity:          .8;
  
  z-index:          999999;
       -o-transition: opacity .1s linear;
     -moz-transition: opacity .1s linear; 
  -webkit-transition: opacity .1s linear;
  
  
  background:       url(../images/_ref/homepage.png) 50% 0 no-repeat;
}
body:hover:after {
  opacity:          .1; 
}