JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay" id="overlay" style="display:none"></div>
<div id="box">
  <div class="chiudi">CHIUDI</div><br>
  <div id="immagine"></div>
</div> 
<div id="boximmagini">
  <div><b>Clicca</b></div>
  <img src="http://i62.tinypic.com/icpph2.jpg" class="imgoverlay" style="width: 31%" />       
</div>

CSS

.chiudi{                 
  cursor:pointer;
}
.overlay{               
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  z-index:100;
  cursor:pointer;
  background-color: #ddd;
}


#box{ 
  width:600px; 
  height:400px;               
  display:none; 
  z-index: 300; 
  position:absolute; 
  top:20%;      
  left:50%;
  transform: translate3d(-50%,0,0);
}

#box img{
    position:absolute;
    left:50%;
    transform: translate3d(-50%,0,0);
}

JavaScript

$(document).ready(function () { 
  $('#boximmagini img').click(function(){
    $("#immagine img:last-child").remove()
    var source= $(this).attr('src');    
    $('#immagine').append("<img src="+source+"/>")
    $('#overlay').fadeIn('fast');
    $('#box').fadeIn('slow');   
  });
  $(".chiudi").click(function(){
    $('#overlay').fadeOut('fast');
    $('#box').hide();
  }); 
  $("#overlay").click(function(){
    $(this).fadeOut('fast');
    $('#box').hide();
  }); 
});