JSFiddle - React, Tailwind, and code Playground

HTML

<div><img src="1.jpg" class="lb"></div>
        <div id="popup"><img src="http://upload.wikimedia.org/wikipedia/commons/0/0e/Felis_silvestris_silvestris.jpg"></div>
  	<div id="hover"></div>

CSS

#popup {
			width: 400px;
			height: 300px;
			background: transparent;
			position: absolute;
			z-index: 999;
			top: 50%;
			left: 50%;
			margin-left: -150px;
			margin-top: -163px;
			display: none;
			padding: 0;
		}
		#hover {
			display: none;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 998;
			cursor: pointer;
		}
		.lb {
			cursor: pointer;
		}

JavaScript

$(document).ready(function() {
			$(".lb").click(function() {
				$("#popup").show("slow");//.css("display","block");
				$("#hover").show();//.css("display","block");
			});
			$("#hover").click(function() {
				$("#popup").hide("fast");//.css("display","none");
				$("#hover").hide();//.css("display","none");
			});
		});