<div class="box box1">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">normal</p>
  </div>
</div>
<div class="box box2">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">multiply</p>
  </div>
</div>
<div class="box box3">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">screen</p>
  </div>
</div>
<div class="box box4">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">overlay</p>
  </div>
</div>
<div class="box box5">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">darken</p>
  </div>
</div>
<div class="box box6">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">lighten</p>
  </div>
</div>
<div class="box box7">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">color-dodge</p>
  </div>
</div>
<div class="box box8">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">color-burn</p>
  </div>
</div>
<div class="box box9">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">hard-light</p>
  </div>
</div>
<div class="box box10">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">soft-light</p>
  </div>
</div>

<div class="box box11">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">difference</p>
  </div>
</div>
<div class="box box12">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">exclusion</p>
  </div>
</div>
<div class="box box13">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">hue</p>
  </div>
</div>
<div class="box box14">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">saturation</p>
  </div>
</div>
<div class="box box15">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">color</p>
  </div>
</div>
<div class="box box16">
<img src="https://i.ibb.co/zFZx634/testImg.png" alt="">
  <div class="conBox">
    <p class="p1">luminosity</p>
  </div>
</div>
.box{
  display:inline-block;
  position:relative; 
  width:200px;
}
img{
  width:200px;
}
.conBox{
  width:100px; 
  height:50px; 
  line-height:50px; 
  padding:0; 
  position: absolute; 
  top:50%; 
  left:50%; 
  transform: translate(-50%, -50%);
  text-align:center; 
  background:#ccc; 
  border: 3px solid #000;
}
.conBox p{
  padding:0; 
  margin:0;
}
.box1 .conBox{  mix-blend-mode :normal;}
.box2 .conBox{  mix-blend-mode :multiply;}
.box3 .conBox{  mix-blend-mode :screen;}
.box4 .conBox{  mix-blend-mode :overlay;}
.box5 .conBox{  mix-blend-mode :darken;}

.box6 .conBox{  mix-blend-mode :lighten;}
.box7 .conBox{  mix-blend-mode :color-dodge;}
.box8 .conBox{  mix-blend-mode :color-burn;}
.box9 .conBox{  mix-blend-mode :hard-light;}
.box10 .conBox{  mix-blend-mode :soft-light;}

.box11 .conBox{  mix-blend-mode :difference;}
.box12 .conBox{  mix-blend-mode :exclusion;}
.box13 .conBox{  mix-blend-mode :hue;}
.box14 .conBox{  mix-blend-mode :saturation;}
.box15 .conBox{  mix-blend-mode :color;}
.box16 .conBox{  mix-blend-mode :luminosity;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.