JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="blackout">
	<div id="enlargedBOX">
    	<img src="" width="500" height="500" border="0" />
    </div>
</div>
</body>

CSS

body { background:#F00; }
#blackout {
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	overflow:auto;
	z-index:100;
	background:#000;
    opacity:.90;
}
#enlargedBOX {
	position:relative;
	margin:50px auto;
	padding:0px;
	width:500px;
	height:500px;
	background:#FFF;
	opacity:1;
}