“Дырка” в родительском блоке CSS

.box { 
  width: 500px; 
  background: url(http://goodimg.ru/img/kartinki-ozero4.jpg); 
} 
 
.head { 
  color: #000; 
  text-align: center; 
  font-size: 16px; 
  text-transform: uppercase; 
  padding-bottom: 15px; 
  transform: translateY(-40px); 
} 
 
.content { 
  padding: 10px; 
  color: #000; 
  background: #fff; 
  position: relative; 
  transform: translateY(40px); 
} 
 
.par { 
  margin-top: -40px; 
}

<div class="box"> 
  <div class="content"> 
    <div class="head">Заголовок</div> 
    <p class="par"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi hic porro dignissimos laboriosam quae autem totam vel optio accusamus quo impedit iure illo culpa, aperiam sit, neque quod quisquam excepturi quis commodi minima provident nesciunt quos. Accusantium 
      facilis et velit? Eius voluptates nobis quos earum nam aliquid expedita nesciunt, officia sit corrupti quas amet laboriosam similique dolore! In placeat, quod ducimus libero reprehenderit assumenda, harum debitis officia fugit accusantium corporis. 
      Fugiat rem odit, in debitis provident, impedit amet culpa consequuntur deserunt sequi vero itaque cum et, assumenda odio est commodi cupiditate. Porro reprehenderit officia eaque nostrum numquam ab aliquid harum? 
    </p> 
  </div> 
</div>