JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<button id="change_me" >Change</button>
<div id="imgToShow">
    <img class="imgZoomClass" src="https://1.bp.blogspot.com/-mOr4ztiKahA/V1LIULLTbiI/AAAAAAAAH5Y/HiMkcHjl7-Eh3a2OXmUMZQBgEYsEiL5EgCLcB/s400/Happy%2BFathers%2BDay%2BImages%252C%2BPictures%252C%2BPhotos%252C%2BPics%2Bwith%2BWishes%2Band%2BQuotes.png"  onload="fadeIn(this)"  />
</div>

CSS

#imgToShow
{
    position: relative;
    width: 400px; // set custom width as you need
    height: 400px; // set custom height as you need
    border: 3px solid #000;
}

#imgToShow .imgZoomClass
{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

JavaScript

// fade in effect function
window.fadeIn = function(obj) {

    $(obj).fadeIn(1000, function(){
         $(obj).parent().find(".imgZoomClass:first").not(':last').remove();
    });
}
$("#change_me").click(function(){
	            $("#imgToShow").append('<img id="imgZoom" onload="fadeIn(this)" style="display:none;" class="imgZoomClass"  src="http://www.valentinesday.mymc.in/wp-content/uploads/2016/03/Happy-Earth-Day-2016-Whatsapp-Pinterest-Twitter-Images-2.jpeg">');

})