JSFiddle - React, Tailwind, and code Playground

by gionaf

HTML

<div id="imgContainer">
<img src="http://www.ghank.com/wp-content/uploads/2012/05/Funny-Monkey-6.jpg">
</div>

CSS

html, body, #imgContainer {
    width:100%; height:100%;
}
#imgContainer > img {
    position:absolute; top:0; right:0; bottom:0; left:0;
    margin:auto;
    width:200px;
    max-width:100%;
    max-height:100%;
}

JavaScript

$('#imgContainer > img').on('click',function(){
   var h = $(this).height();
   var w = $(this).width();

    //get div dimensions
    var div_h =$('#imgContainer').height();
    var div_w =$('#imgContainer').width();

    var  pY = Math.round((div_h - h) / 2) + 'px';
    var  pX = Math.round((div_w - w) / 2) + 'px';

    $(this).animate({
        opacity:"1", 
        zoom: '500%'
    }, 'medium')
        
});