How to Blend Text Into Images in CSS

// Use the mix-blend-mode property to blend text
// into images.

.blend { 
  mix-blend-mode: overlay;
}

<figure>
  <img src="nature.jpg" />
  <figcaption class="blend">
    “Nature does not hurry, 
    yet everything is accomplished.”
~ Lao Tzu
  </figcaption>
</figure>

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;