use the css3 transform-origin to center and zoom <p>I have a series of divs on my page. Each div has a background image and is arranged in a grid formation. There are an abitrary number of divs on my page. The page is constrained to a size using <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;</code></p> <p>I want to be able to click on a div, have it scale to a specific scale, and center.</p> <p>My markup:</p> <pre><code>&lt;body id="body"&gt; &lt;div id="container" style="position: relative"&gt; &lt;div id="pack1" class="screenItem cardPack"&gt;&lt;/div&gt; &lt;div id="pack2" class="screenItem cardPack"&gt;&lt;/div&gt; &lt;div id="pack3" class="screenItem cardPack"&gt;&lt;/div&gt; &lt;div id="pack4" class="screenItem cardPack"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>my css:</p> <pre><code>#pack1{ margin-left: 20px; margin-top: 20px; height: 193px; width: 127px; background-image: url(../images/image1.png); background-size: 100% 100%; float: left; clear: both; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #pack2{ margin-right: 20px; margin-top: 20px; height: 193px; width: 127px; background-image: url(../images/image2.png); background-size: 100% 100%; float: right; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #pack3{ margin-left: 20px; margin-top: 20px; height: 193px; width: 127px; background-image: url(../images/image3.png); background-size: 100% 100%; float: left; clear: both; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #pack4{ margin-right: 20px; margin-top: 20px; height: 193px; width: 127px; background-image: url(../images/comingSoon.png); background-size: 100% 100%; float: right; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #body, .ui-page { background-image: url(../images/bg.png); background-size: auto 100%; background-repeat: repeat-x; } #container { margin: auto; width: 310px; height: 568px; } </code></pre> <p>I have a fudge which almost works:</p> <pre><code>$(cardPack).click(function() { var left = $(cardPack).position().left; var top = $(cardPack).position().top; $(cardPack).css("-webkit-transform", "scale(2.5,2.5)"); $(cardPack).css("-webkit-transform-origin", (3*(left/4)) + " " + (3*(top/4))); }); </code></pre> <p>But I think that's more of a coincidence and luck. My brain is not working to the point where I can workout where to set the <code>transform-origin</code> so that the image will end up in the center of the screen, regardless of its start point.</p> <p>I am happy to consider alternatives to <code>transform-origin</code> to make this happen.</p> <p>EDIT: A "not quite acting the same as it does locally" jsfiddle: <a href="http://jsfiddle.net/a7Cks/9/">http://jsfiddle.net/a7Cks/9/</a></p>