ZoomIn Effect

HTML

<div class="zoom-in strawberry">
  This is a test
</div>
<button onclick="zoomin(50, 5, 1000)">Zoom In</button>

CSS

.strawberry{
    background-image: url('http://s1.1zoom.me/big3/485/340255-sepik.jpg');
    background-repeat: no-repeat;
}

.zoom-in{
    display: block;
    width: 400px;
    height:350px;
    background-size: 400px;
}

JavaScript

function zoomin(interval, sizeChangeEveryInterval, stopResizeWhenSizeReached){
    var timeout = setInterval(function(){
        var target = $(".zoom-in")
        var bgposx = target.css('background-position-x') ? parseInt(target.css('background-position-x')) : 0;
        target.css('background-position-x',(bgposx - sizeChangeEveryInterval) + "px");
        var bgposy = target.css('background-position-y') ? parseInt(target.css('background-position-y')) : 0;
        target.css('background-position-y',(bgposy - sizeChangeEveryInterval) + "px");
        var bgsize = !isNaN(parseInt(target.css('background-size'))) ? parseInt(target.css('background-size')) : 100;
        target.css('background-size',(bgsize + sizeChangeEveryInterval) + "px");
        if(stopResizeWhenSizeReached < bgsize) clearInterval(timeout)
    }, interval)
}