Invert color text

HTML & CSS
1

Hello again!

I am trying to make another difficult to me test about CSS.

What I want is to make some text scrolling and when it is hovering over a div it will revert it’s color.
For example from dark, that it can be black on a white background, to something more lighter when it is hovering a darker background.

Here is what I have made as a code, and from my search I think I need these two properties:

mix-blend-mode: difference;
    filter: invert(1);

If you could open the codepen link in a tab it works better I think.

Although I have not make it working until now.

3

Min-blend mode only works on the background of a parent of the element in question.

The mix-blend-mode CSS property sets how an element’s content should blend with the content of the element’s parent and the element’s background.

You are placing a fixed positioned background underneath the text therefore the text really has no background to interact with. (At least that’s how I interpret the specs ;))

As an example you can see that if you had some background-color to the parent then you would get the difference.

or:

Note that you cannot have black text because the difference would be white which would be invisible over the page background.

I’m not 100% sure of your use case but you will need to make it work with the constraints mentioned above.

1 Like
4

Ok I see your point.

Basically what I am trying to do, is to have black text over white background, and when this text is scrolling up and meets another div - which it will have an image as a background not just plain color - it will change the color to “difference” according to the image background.

Maybe this is not something that can be done though?

5

You can use an image in my example to the same effect.

Screen Shot 2021-03-11 at 13.23.12
Screen Shot 2021-03-11 at 13.23.12819×591 235 KB

e.g.

However, I’d need to see your full use case to work out if what you actually want is possible or not.

Another example:

1 Like
6

Yes that’s really awesome!! Thanks!

The only thing that bothers me, is that the font is getting bolder, is there any way to avoid it?

7

It looks like its a result of the mix-blend mode. The only thing that springs to mins is perhaps to reduce the opacity a bit.

e.g.

p {
  mix-blend-mode: difference;
  /*color:#fff;*/
  color:rgba(255,255,255,0.6);
  }

Actually adding this seems to help Chrome:

p {
  mix-blend-mode: difference;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

1 Like
8

I did see an article about this sort of thing:-

4 Likes
9

Thank you so so much this seems to work.

I will check the article too, looks awesome!!!

1 Like
10

Is it possible when the mouse is outside of the animation area, to scroll the text with the mouse wheel?
Will this need to create javascript code, or it can be done with the normal way somehow?

11

Not sure if this is what you mean exactly.

1 Like
12

Yes it works!!!

Thank you PaulOB, I own you a beer if you ever come to Greece!!

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.