<div class="box">
  <div class="textwrap">
    <p class="text">
     
      SUMMER VACATION
       <span>2019/09/06</span>
    </p>
  </div>
</div>
.box {
  width:100%;
  padding:10% 15%;
     background-image: url(https://f.uploader.xzy.pw/eu-prd/upload/20191108160447_6f6d664c4f.jpg);
  background-size:cover;
  box-sizing:border-box;
}
.box *{
  box-sizing:border-box;
}

.textwrap{
  margin:auto;
  width:100%;
  padding:5%;
  background:#fff;
  text-align:center;
  box-shadow:0 0 0 8px #fff,0px 0px 18px rgba(0,0,0,0.3) ;
  border:1px solid #333;
}

.text{
    font-family: 'Merriweather', serif;
    letter-spacing: 4px;
    margin:0;
    line-height: 1.1;
    font-size: 8vw;
    font-weight: bold;
    color: rgba(0,0,0,0.2); 
    background-image:     url(https://f.uploader.xzy.pw/eu-prd/upload/20191108160447_6f6d664c4f.jpg); 
    background-size:cover;
    background-position:center;
    -webkit-background-clip: text;
}

.text span{
  padding:6px;
  font-size: 4vw;
  display:block;
  color:#fff;
  background-color:#333;
  margin-top:2%;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Merriweather&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.