zooming content inside div using transform scale property

Question

I am trying to zoom contents of div(same behavior as browser zoom). After searching a lot I found css 3 transform scale property will full fill this requirement. The content is zooming when I increase the scale size but I am losing the contents of the div. overflow: hidden also didn't help.

var currentZoom = 1.0;

$(document).ready(function () {
    $('#btn_ZoomIn').click(
        function () {
            currentZoom = currentZoom+0.04;
            var scaleString = "scale("+currentZoom+")";
            $('#divName').css("transform", scaleString);
        })
    $('#btn_ZoomOut').click(
        function () {
            //var scaleString = "scale("+currentZoom -= .1+")";
            currentZoom = currentZoom-0.04;
            var scaleString = "scale("+currentZoom+")";
            $('#divName').css("transform", scaleString);
        })

});

Js fiddle link: http://jsfiddle.net/chaitut715/k4WsB/

Answer 1

Add a container around #divName:

<div class="wrapper">
    <div id="divName">
        <img src="https://www.google.co.in/intl/en_ALL/images/srpr/logo11w.png"></img>
    </div>
</div>

And set overflow: hidden; on the new container:

.wrapper {
    overflow: hidden; /* 'auto' would probably be better */
    width: 500px;
}

Working demo