<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.