title: How to zoom out image out of the html container
body: <p>I have a html table in side a div tag which in body of html page. I have an image in one of the td element of table. My requirement is to zoom out the image (as in most of the e commerce sites) when I mouse over the image over td element.</p>
  
  <p>I found the code and able to do it. But the problem is that it restricts to <code>&lt;td&gt;&lt;div&gt;</code> container only and doesn't zoom out over other sections.</p>
  
  <p>This is my <code>&lt;td&gt;</code> tag -</p>
  
  <pre><code>&lt;td colspan="4"&gt;&lt;img class ="blog" src="shirt.jpg" alt="Item" border='3' height='390' width='638'/&gt;&lt;/td&gt;
  </code></pre>
  
  <p>This is the CSS -</p>
  
  <pre><code>.blog:hover {
      cursor: pointer;
      height:475px;
      width: 350px;
      transform:scale(1.5);
      -ms-transform:scale(1.5); /* IE 9 */
      -moz-transform:scale(1.5); /* Firefox */
      -webkit-transform:scale(1.5); /* Safari and Chrome */
      -o-transform:scale(1.5); /* Opera */
      overflow: auto;
  }
  </code></pre>
  
  <p>Screenshot <a href="http://i.stack.imgur.com/cKX3J.jpg" rel="nofollow">here</a>.</p>