Hi, I’m trying to use blending mode on the text of my menu but without any results. I’d like it to change to “difference” when it hovers over any widget but the text remains the same color. I’ve inserted this code with the text’s ID in the CSS tab:
[data-id=“650c621f75667f0053365076”] {
mix-blend-mode: difference;
}
Could you help me?
Hi, Sol. Try to add !important after mix-blend-mode: difference;
[data-id=“650c621f75667f0053365076”] {
mix-blend-mode: difference !important;
}
did you get an answer I have same issue where the logo turn white and never change colors
I think if you have any animation assigned to the element you want to add the blend-mode to this will not work.
With every animation another parent div is created and you would need to assign the mix-blend onto that. This is possible, but you would need js/jquery to do it.
Hi, i have tried everything in the different threads about this topic but somehow I don’t get It to work.
I have uploaded two screens so u can see the code I have rn.
The Text that gives me problems has an animation for opacity and position and is also used as a trigger for an image.
I would be very thankful for some help!
this is the link to my project:
Well, should work, but exchange the “load” listener for a simple setTimeout with a delay of maybe 1000ms as the load listener will not fire.
The exact syntax you’ll find with your prefered searchengine…
Meet the most elegant, simple and powerful web-tool for designing websites, presentations, portfolios and all kinds of digital publications.
Thank u for your answer!
I have tried to change the code like you said but somehow now, things are not working.
It seems like the whole page gets put in difference and freezes after 1000ms
I will leave u the link to my website here:
Thank you in advance!
the link to your project isnt working.
your code is looking good. do you have two animations assigned to the widget?
Im sorry, I think thats because i havent published it.
Yeah exactly. The widget has an animation for opacity and position. The animations are triggered by clicking on another widget. Also the widget is used as a link to another page when u click on it.
Thank you!!
yeah, but post a link to your project!!! its stil not working.
I’m sorry, here it is should be working now.
The Texts in the Bottom left are the ones giving me problems
Ok, just delete one .parent() as your widget only have one animation (but with two parameters)
And repeat the js line with all menu items.
Okay i deleted one .parent() and I repeated the js line for the 4 menu items, but still no luck…
Anything else I could do?
(Edit 1)
I have no idea how but it randomly worked once on one word, and then when I preview again, it is not working eventhough I didn’t change a single thing.
(Edit 2)
Now it seems that sometimes it works, but mostly I doesnt
you could increase the setTimeout delay to 2 seconds (2000ms) and see if it works every time then.
This works but only for the texts on one page.
If I want to do the same for other pages it either doesn’t work there or on the previous page, depends on what page I changed my code the last time, for example if I I change something whilst im on my landing page the code works there, but not on the other page and the other way round…
I have tried to rewrite the script for every page but that didn’t do anything.
well, this might be because the elements on your subpages are not accessible from the main page on which you are using the JS code to set the css mixblendmode style.
This is logic, as the elements from the subpage ar enot been loaded on the mainpage.
You would need to execute the script also on your subpages.
So just copy and paste your code into a codewidget on ech subpage.
I have done that but the problem stays the same. The texts that are not on my main page are not animated so I thought that might be a problem so I tried to animate them but no difference.
It seems that if the code on my subpages is doing the opposite, by that I mean that it works for the few seconds I set in the Set-Timeout and then the widget freezes and goes behind the images.
the problem is, that the parent container (fixed-position-container) of your subpage element “see more pictures” has also the mix-blend-mode: difference; which makes it looking like its in the back.
So make sure, that for this element only use one method: the pure css way would be to prefer here, as the element doesn´t has a animation.
So your idea, that it isn´t working because of a double blendmode is kind of right.
