JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cover"></div>
<div class="popup">
    <div class="close">
       <span>X</span>
    </div>
</div>

<div class="letters">
  <div class="open">
    <div class="letter">
       <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/test_ehrenfeldmag.jpg',1)">
          <img src="images/test_ehrenfeld.jpg" name="Image9" width="150" height="180" border="0" id="Image9" />
       </a>
    </div>
  </div>
  <div class="name">Rabbi Simcha Bunim Ehrenfeld</div>
</div>

CSS

.popup {
position:fixed;
border:solid 1px black;
width:200px;
height:200px;
left:45%;
top:25%;
display:none;
background-color:red;
}

.cover {
background-color:black;
width:100%;
height:100%;
display:none;
position:fixed;
top:0;
left:0;
}

.close {
color:#fff;
font-weight:bold;
background-color:#454545;
width:12px;
height:12px;
position:absolute;
top:-12px;
left:-12px;
padding:4px 6px 8px 6px;
border-radius:25px;
cursor:pointer;
}

JavaScript

$(document).ready(function () {
       $(".open").click(function () {
        $(".popup").fadeIn(500);
        $(".cover").fadeTo(500, 0.5);
    });
    $(".close").click(function () {
        $(".popup").fadeOut(500);
        $(".cover").fadeOut(500);
    });
});