difference blend mode
-
Hello Everyone,
I would like to use a fullscreen video background on my front-page with a text field above it. Depending on the background the text should be displayed inverted. Which custom css do I need use here to set this text field to the "difference" blend mode?
Thank you very much in advance and an even more for developing lay theme, it's easy and a lot of fun to use! :)
-
aha thanks!
probably just the normal
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-modemix-blend-mode: difference;
and then the text you put over your video should be white
make sure in the gridder to make your rows browser height, - right click row - browser height
then you can put white text on top of sth in your layout
u can post the link here if you try to make it work and need help
not sure if blend mode will work with this, sometimes its so tricky to make it workDepending on the background the text should be displayed inverted.
the html tag or body tag i think has some class that changes depending on what slide you're on, probably you can use this for only inverting your text on some slides
or you just only give the "invert" html class to the texts you want to invert
good luck
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it