<div class="card">
	<h1>mySpace</h1>
</div>
.card {
	background: url(https://images.pexels.com/photos/1957477/pexels-photo-1957477.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat center center / cover;
	height: 300px;
	width: 300px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	margin-top: 30px;
}

.card > h1 {
	color: #fff;
	font-family: sans-serif;
	background: rgba(0,0,0,.7);
	padding: 5px 30px;
	position: absolute;
	bottom: 60px;
	left: 50%;
	transform: translatex(-50%);
}

.card > h1::before {
	position: absolute;
	content: '';
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	top: -5px;
	left: -5px;
	box-shadow: 0 0 0 100vh rgba(0,0,0,.7);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.