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

[alvarodoze]

Hi @arminunruh - Is there a way to apply mix-blend-mode: difference; to a "Project index"? I am trying to follow this but it doesn't seem to work...
https://alvarodoze.com/try-copy-2/
Thank you so much

[arminunruh]

no i think that doesnt work as i replied in the other subject

[alvarodoze]

Is just that when you use the "project index" + "image hover" with the full screen it becomes really hard to read making it not accessible especially if the text is dark and the image is dark too... Do you think there is a way around or that you could work on making it possible?... 🙏🙏 I would really much appreciate it.

[arminunruh]

no i think i cant make it possible :/

[alvarodoze]

Okeey.... 😮‍💨
It is technically impossible or do you think if I hire someone with this expertise can make it work?

[arminunruh]

yea i think technically not possible

[alvarodoze]

Ok thanks!