JSFiddle - React, Tailwind, and code Playground

HTML

<div class="home_wrapper">
    <div class="header">
    </div>
</div>

CSS

html, body {height:100%;}
div.home_wrapper {width:100%;height:100%;}

/*below here is the issue*/
div.home_wrapper > div.header {
		width:calc(70% - 5px);
		height:calc(70% - 5px);
		position:relative;
		margin-top:5px;
		float:left;
		background-image:url(assets/13.jpg);
		background-position:bottom;
		background-repeat:no-repeat;
		background-size:cover;
		transition:background-image 0.25s ease-in-out;
    
    /*so that you can see where it is ->*/border:solid 1px #333;
	}
	div.home_wrapper > div.header:hover {
		background-image:-webkit-linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.5)), url(assets/13.jpg);
		background-image:   -moz-linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.5)), url(assets/13.jpg);
		background-image:	  -o-linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.5)), url(assets/13.jpg);
		background-image:		 linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.5)), url(assets/13.jpg);
	}