<link href="https://fonts.googleapis.com/css?family=Bitter&display=swap" rel="stylesheet">

<div class='items'>
  <div class="item">
    <div></div>
    <div>
      <img src="https://pp.userapi.com/c849320/v849320891/168b4/-ybre2cVx1M.jpg?ava=1" alt="">
    </div>
  </div>
  <div class="item">
    <div>
      <p>yes</p>
    </div>
    <div>
      <p class="blend">no</p>
    </div>
  </div>
</div>
*{
  margin:0;
  padding:0;
}
html,body{
 font-family: 'Bitter', serif;
}
.item{
  display:flex;
}
.item div{
  width:100%;
}
.item div p{
  font-size:6rem;
  text-align:center;
  transform:translateY(-50%);
  font-weight:900;
  color:#000;
  text-transform:uppercase;
}
p.blend{
  position: relative;
}
p.blend:after{
  content:"no";
  position: absolute;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  height:50%;
  overflow:hidden;
}
.item div img{
  display:block;
  width:100%
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.