title: image disappears when I change css clip: rect property
body: <p>I am using clip:rect to clip images into thumbnails and I want to randomise the placing of the clip rectangle on rollover. my code:</p>
  
  <pre><code>    $('.itembox').mouseover(function() {
      var img = $(this).find('img');
      var width = img[0].width;
      var height = img[0].height;
      var clipwidth = Math.floor( $(this).width() );
      var clipheight = Math.floor( $(this).height() );
  
      var widthrange = width - clipwidth;
      var heightrange = height - clipheight;
  
      var x = Math.floor(Math.random() * widthrange);
      var y = Math.floor(Math.random() * heightrange);
      var x2 = x + clipwidth;
      var y2 = y + clipheight;
  
      img.css('clip', 'rect('+x+'px '+x2+'px '+y+'px '+y2+'px)');
      $(this).children('.itemboxbg').show();
      $(this).css({'color' : 'white'});
  
  });
  </code></pre>
  
  <p>It works fine with the preset css:</p>
  
  <pre><code>.itemboxbg {
      border: none;
      position:absolute;
      width:193px;
      height:273px;
      z-index:0;
  }
  .itemboxbg img {
      border: none; 
      position: absolute; 
      clip: rect(0px 193px 273px 0px); 
  }
  </code></pre>
  
  <p>but when the rollover event fires and it changes the css the image disappears. the css is fine e.g : </p>
  
  <pre><code>&lt;img src="./img/exampleimage.png" style="clip: rect(304px 498px 72px 344px);"&gt;
  </code></pre>
  
  <p>any help would be appreciated.</p>