Using mix-blend-mode on text containers
-
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
-
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
Before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. When using a WordPress Cache plugin, disable it or clear your cache.
Now see if your problem solved itself.
Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it
I don't answer or check forum DMs, please just post on the forum.