JSFiddle - React, Tailwind, and code Playground

by Rittam Debnath

HTML

<div id="project-img-main">
		<div id="project-image-container"><img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
			<div id="project-img-text-container">
				<div id="project-img-text">Test</div>
			</div>
		</div>	
	</div>

CSS

img{
  position: absolute;
}
#project-img-main {
	position: relative;
	margin: 0;
	width: 100%;
	height: auto;
}
#project-image-container {
	width: 100%;
	height: 100%;
	position: relative;
}
#project-img-window {
	max-height: 700px;
	/*background: rgba(0,0,0,0);*/
	width: 100%;
}
#project-img-text-container {
	background: rgba(0,0,0,.7);
	position: absolute;
	width: 33%;
	height: 10%;
  right: 0;
  z-index: 99;
}
#project-img-text {
	color: #FFF;
	font-size: 2em;
}