Some content in box 1.
Some more content in box 2.
Some cool stuff in box 3.
Some classics in box 4.

Simply add the following code into an Joomla HTML Module. Please switch the standard editor to none to support the HTML element style. After testing you might want to put the CSS into your template CSS or some custom CSS.

<div class="box_container clearfix">
	<div class="box box01">
		<div class="box_inner">
			Some content in box 1.
		</div>
	</div>
	<div class="box box02">
		<div class="box_inner">
			Some more content in box 2.
		</div>
	</div>
	<div class="box box03">
		<div class="box_inner">
			Some cool stuff in box 3.
		</div>
	</div>
	<div class="box box04">
		<div class="box_inner">
			Some classics in box 4.
		</div>
	</div>
</div>
<style type="text/css">
	.clearfix:after {
		display: table;
		content: "";
		clear: both;
		font-size: 0;
		height: 0;
	}
	.box_container {
		width: 100%;
		padding: 0;
		background-image: url(images/biryani.jpg);
		background-size: cover;
	}
	.box {
		float: left;
		width: 25%;
		color: #fff;
	}
	.box_inner {
		min-height: 140px;
		padding: 10px;
		margin: 10px;
		transition: opacity 0.8s ease-in-out;
	}
	.box_inner:hover {
		opacity: 0;
		transition: opacity 0.2s ease-in-out;
	}
	.box01 .box_inner {
		background-color: rgba(0, 33, 33, 0.7);
	}

	.box02 .box_inner {
		background-color: rgba(33, 0, 33, 0.7);
	}

	.box03 .box_inner {
		background-color: rgba(33, 33, 0, 0.7);
	}

	.box04 .box_inner {
		background-color: rgba(0, 0, 33, 0.7);
	}
	@media all and (max-width: 768px) {
		.box {
			width: 50%;
		}
	}
	@media all and (max-width: 376px) {
		.box {
			width: 100%;
		}
	}
</style>
3.9.13