<div class="wrapper">
  <div class="box box-back">
    <h3>SWEETIES</h3>
  </div>
  <div class="box box-front">
      <img src="https://cdn.pixabay.com/photo/2017/03/30/15/47/churros-2188871_960_720.jpg" />
  </div>
</div>
.wrapper {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f6f6f6;
}

.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20vh 0;
}

img {
  width: 100%;
}

h3 {
  font-size: 60px;
  color: white;
}

.box.box-back {
  transform: translateZ(0);
  z-index: 99;
  text-align: center;
}
.box.box-front {
  width: 1500px;
  transform: translateZ(-1px) scale(2);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.