Zooming Trial

by skibulk

HTML

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>Hello</td>
        <td>
            <div id="zooming">
                <p><img src="http://placehold.it/20x20"/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta congue augue. Maecenas ac dolor sit amet sem dictum consectetur. Maecenas dictum nunc id dignissim vestibulum. Maecenas consectetur metus id condimentum auctor.</p>
            </div>
        </td>
        <td>World</td>
    </tr>
</table>

CSS

* {   
    box-sizing: border-box;
}

td {
    vertical-align: top;
}

}
#zooming {
    width: 300px;
    margin: 0 auto;
    background: #CCC;
    overflow: hidden;
}

JavaScript

var z = 0;
var w = 300;

(function(){
    z += 0.1;
    $('#zooming').css('zoom', z);
    $('#zooming').css('width', w/z);
    setTimeout(arguments.callee, 2000);
})();