JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="contenedor">
	<div class="caja">
			<div class="transparent">RC planes</div>
		</div>
		<div class="foto"><img src="http://www.lorempixel.com/400/200"/>
			<div class="transparent dos">RC planes</div>
		</div>
	</div>
</body>
</html>

CSS

.caja {
	width: 300px;
	height: 160px;
	background-color: pink;
	float: left;
}

.transparent {
	font: 40px Arial;
	font-weight: bold;
	color: orange;
	background-color: gray;
	opacity: .6;
	width: 70%;
	height: 100px;
	margin: 30px 0 0 180px;
	text-align: center;
	line-height: 100px;
}

.foto {
	width: 500px;
	height: 200px;
}
.dos {
	margin-top: -140px;
}