JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overlay">
    <div class="square">
        <img src="http://placekitten.com/800/800" width="400"
            height="400" />
    </div>
</div>

CSS

#overlay {
    overflow: hidden;
    width: 400px;
    height: 400px;
}

.square {
    position: relative;
    width: 320px;
    height: 320px;
    background: #333;
    vertical-align: bottom;
    
    font-size: 2em;
    font-family: Impact, Arial, sans-serif;
    text-transform: uppercase;
    color: #fff;
}

JavaScript

$('.square img').on('click', function() {
    $('.square').animate({
        zoom : '200%',
        top  : '-0%',
        left : '-0%'
    }, 200);
});