JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="page">
<a href="#image1"><img src="http://www.planwallpaper.com/static/images/20-Amazing-and-Cool-Background-For-Desktop-13.jpg" class="original" alt="" /></a>
</div>
<a href="#" id="image1" class="pressbox"><img   src="http://www.planwallpaper.com/static/images/20-Amazing-and-Cool-Background-For-Desktop-13.jpg" style="width: 70%; max-height:90%; "class="overlay-image" alt=""></a>

CSS

#page{
position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    
}
.pressbox {
    width: 0;
    height: 0;
    position: fixed;
    overflow: hidden;
    left: 0;
    top: 0;
    z-index: 9999;
    text-align: center;
}
.pressbox img   {
    opacity: 0;
    padding: 10px;
    background: #ffffff;
    margin-top: 100px;
    -webkit-box-shadow: 0px 0px 15px #444;
    -moz-box-shadow: 0px 0px 15px #444; 
    box-shadow: 0px 0px 15px #444;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;   
} 

.original {
  padding: 20px;
  width: 30%;
  height: auto;
  
  
  }
}

JavaScript

$( ".original" ).on( "click", function() 
{

$( "#page" ).css( {"-webkit-filter":"blur(5px)" , "-moz-filter":" blur(5px)", "-o-filter":" blur(5px)", "-ms-filter":" blur(5px)","filter":" blur(5px)" , "background": "rgba(0,0,0,0.4)" });

$( ".pressbox" ).css( {"width":"auto" , "height":"auto" , "bottom":"0",  "right":"0"});

$( ".overlay-image" ).css( {"opacity":"1"});

});

$( ".pressbox" ).on( "click", function() 
{

$( "#page" ).css( {"-webkit-filter":"blur(0px)" , "-moz-filter":" blur(0px)", "-o-filter":" blur(0px)", "-ms-filter":" blur(0px)","filter":" blur(0px)" ,"background": "rgba(0,0,0,0.0)" });

$( ".pressbox" ).css( {"width":"0" , "height":"0" , "left":"0",  "top":"0" , "z-index":"10"});

$( ".overlay-image" ).css( {"opacity":"0"});



});