<div class="container">
  <img src="https://images.unsplash.com/photo-1528164344705-47542687000d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1969&q=80" alt="" class="image" />
  <h1 class="text">KYOTO</h1>
</div>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap');

body {
  font-family: Inter, sans-serif;
}

.container {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}
.image {
  width: 100%;
}
.text {
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  font-weight: 800;
  font-size: 100px;
  text-align: center;
  mix-blend-mode: overlay;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.