<div class="image-container">
    <img src="https://source.unsplash.com/daily" class="img">
    <div class="text-container">
        <div class="inner">
            <h1>Title</h1>
            <p>This is some text</p>
        </div>
    </div>
</div>

.image-container {
		max-width: 800px;
    position: relative;
}

.image-container:before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    position: absolute;
    background: rgba(0,0,0,0.5);
}

.img {
	width: 100%;
	display: block;
}

h1 {
	font-size: 30px;
}

p {
	font-size: 18px;
}

h1, p {
	color: #ffffff;
}

.image-container .text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-51%, -50%);
    -moz-transform: translate(-51%, -50%);
    -ms-transform: translate(-51%, -50%);
    -o-transform: translate(-51%, -50%);
    transform: translate(-51%, -50%);
}

.image-container .text-container .inner {
    z-index: 2;
		text-align: center;
    position: relative;
}