Using mix-blend-mode on text containers

[hx]

Hello everyone,

I am currently playing around with CSS mix-blend-mode for future use, however it's not working when applied to text containers - while it works with the site title and menu as demonstrated here: https://brutalo.biz/

This is the CSS code I am using:

.static {
	mix-blend-mode: difference !important;
	position: fixed !important;
  top: 35% !important;
  left: 20% !important;
  transform: translate(-25%, -25%)!important;
}

.blend {
	mix-blend-mode: difference !important;
}

The custom classes are then applied to the text containers, but nothing happens, neither on the video nor the blue background. I tried applying #fff in the text formats, the font editor etc. but also, nothing changes. I wonder if I'm just targeting the wrong divs / classes ?

As always, thank you for any input. xx

[Richard]

Dear @hx

When i apply the 'difference' to the row it works:

.row-1 .column-wrap {
    mix-blend-mode: difference;
}

You may wish to apply a special Class or ID to the row, to be safe:

Hope this helps & have a wonderful day! :)

Best
Richard