css responsive blend-mode

Впервые от вас узнал про mix-blend-mode ) Методом тыка попробовал что-то сделать, вышло так:

ДЕМО

<div class="bu-1"></div>
<div class="bu-2"><img class="mix" src="..."></div>

CSS:

Основную картинку, которая должна быть слева в синем диве, поместил как задний фон, через background-image:

.bu-1 {background-color:  #045acf;
       width: 100%;
       height: 200px;
       position: absolute;
       text-align: center;
       background-image: url('ссылка.png');
       background-repeat: no-repeat;
       background-size: 100% 200px;
       }

Чтобы картинка в случае чего, не повторялась и была одна - background-repeat: no-repeat;, а чтобы приняла ширину и высоту дива - background-size: 100% 200px;, чтобы в случае чего, располагалась всегда по центру - text-align: center;, хотя тут не обязательно.

А второй див через float: right отправляется направо:

.bu-2 {width:  20%;
       height: 200px;
       float: right;
       text-align: center;
       position: relative;
       border: 2px solid red;
       }

И задается ширина 20%, чтобы всегда прикрывала только 20% основного див-а. Ну и картинка внутри 20-процентного дива:

.mix {mix-blend-mode: multiply;
      width: 100%;}