JSFiddle - React, Tailwind, and code Playground

HTML

<div id="flashLight">
	<div id="blackFlare"></div>
	<div id="flare1"></div>
</div>
<button onclick="openCrate();" style="position:absolute; bottom:50px; left:50px;">Open</button>

CSS

body{
	background:#555555;
}
#flashLight{
	width:450px;
	height:300px;
	position:absolute;
	top:50px;
	left:50px;
	box-shadow:0px 0px 5px #222222;
	/*display:flex;
	align-items:center;
	justify-content:center;*/
	overflow:hidden;
}

#flare1{
	background-image:url(http://dc404.4shared.com/img/csgkOePu/s7/13e804d7500/flares__13_.png);
	background-size:100% 100%;
	width:450px;
	height:300px;
	position:absolute;
	top:0px;left:0px;
	opacity:0;
}

#blackFlare{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:#111111;
	opacity:0;
}

JavaScript

function openCrate( ) {

	var initWidth = 450;
	var initHeight = 300;
	var initTop = 0;
	var initLeft = 0;

	$('#flare1').css('display','block');
  $('#flare1').css('width',initWidth);
	$('#flare1').css('height',initHeight);
	$('#flare1').css('top',initTop);
	$('#flare1').css('left',initLeft);
	$('#flare1').css('opacity',1);
	$('#blackFlare').css('opacity',0);
	
	var scale = 50;
	
	var newWidth = initWidth * scale;
	var newHeight = initHeight * scale;
	
	var newTop = -(initHeight*scale - initHeight )/2 ; /*-initHeight * scale/2  + initHeight;*/
	var newLeft = -(initWidth*scale - initWidth)/2  ; /*= -initWidth * scale/2 + initWidth;*/
	
	
	$('#flare1').animate({top:newTop,left:newLeft,width:newWidth,height:newHeight},750,function(){
		$('#flare1').animate({opacity:0},250);
		$('#blackFlare').animate({opacity:1},250);
	});
	
}