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.

I found the code and able to do it. But the problem is that it restricts to `<td><div>` container only and doesn't zoom out over other sections.

This is my `<td>` tag -

```
<td colspan="4"><img class ="blog" src="shirt.jpg" alt="Item" border='3' height='390' width='638'/></td>

```

This is the CSS -

```
.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;
}

```

Screenshot [here](http://i.stack.imgur.com/cKX3J.jpg).