Is CSS mix-blend-mode (difference) supported/achievable in Wix Studio?

Ask the community
, ,
1

Question:
Is CSS mix-blend-mode (difference) supported/achievable in Wix Studio?

Product:
Wix Studio

What are you trying to achieve:
We need an element, e.g. text or vector to invert colors based on current background. Say a logo and title to have inverted colors on video background or when scrolling a page.

What have you already tried:
Searched Forums, topics, support docs. No definitive or clear answer. Tried a few codes but no luck.

Additional information:
Very desirable feature. It’d be a huge favor if someone has a solution.

1 Like
2

I’ve tried it, but unless it’s the immediate background, it doesn’t seem to work.

In other words, 've made it work if they’re in the same container, but not if the text is in the header section and the image is in another section.

At least that’s my experience.

1 Like
3

Thanks for looking into this. :+1:
So a title on top of a section with video background would work?
If yes, I’d love to know how to achieve it.

Thank you.

4

I couldn’t find the site where I experimented, I’m sorry :frowning:

One thing to remember when working with CSS for text in WS, if you’re for example targeting a

text, and you give the text “difference” as a class. Your CSS needs to be

.difference p{

}
for it to affect the text

1 Like
5

Thank you for your answer it’s very insightful. We’ll try to do our best, although we are not coders so I would really appreciate if you shared the piece of code if you find it.

6

Hi Julius, same problem - looking in vain for an integration of the mix-blend-mode (difference); in the meantime I have helped myself with the animations available in WixStudio - it’s a simple change from black to white and vice versa. Perhaps the numerous animations in WixStudio will help you; the website:
https://hedrich1.wixstudio.io/black-version

2 Likes
7

Hi! This is great and exactly what I need at the moment. How did you achieve the color change?

8

Hi, it’s actually now supported via one line CSS code in studio.

9

Hi Daniel, sorry for the late reply; I’m desperately trying to generate a custom element in Wix Studio. The following code refers to your request; I noticed that “mix-blende-mode” doesn’t work in a pinned header, strangely enough; I then detached the header on the global set and put it at the top as a normal section - after that it suddenly worked. Why? I don’t know either. For this reason, position:fixed is entered in my example.

.coliseum {
position: fixed;
mix-blend-mode: difference;
top: 5vh;
z-index: 1;
}

.coliseum:hover {
mix-blend-mode: exclusion;
}

10

Hey, did you find a solution to achieve this mix-blend-mode with css in wix?
It would be rly helpful if you shared this with us! :slight_smile: Thank you!

11

Texts and images now natively support blending modes in Wix Studio without code.

12

Ah yes, for elements with standard or sticky position this works. But I need to add the mix-blend-mode to a pinned element in the Header…and for some reason that does not work.
Do you have similiar experience? Or did you find a solution to this? Thank you :slight_smile:

13

I too wanted our logo in header to change based on current background when scrolling. Neither the code or native solution worked for me unfortunatelly. I refuse to believe it’s not doable though but I had no luck finding a solution. If anyone here knows how, or you come accross a solution plese let me know. Thanks! :crossed_fingers:

14

Hey Julius, I posted a topic about this issue 2 days ago. I found a temporary solution for the “Header-Problem”, you can check it out here:

Thats how for I got with this :grin:

1 Like
15

what is the "P{} for, what do you type in there?