HTML & CSS Difference / Invert Text color, on hovering

[Mpampis]

Hello!

I am trying to make an awesome effect

I would like to change the color of the text, to be inverted according to the background of each section/div.

From my search, I think that I have to use this attributes as styles.

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

What I have try so fat but not working as I like it, is this one. I am trying to make the text to be black outside of the div, but change and make it's color difference as it hovers over the green box.

https://codepen.io/tzoun/pen/wvoQYGP

If you have any suggestions, I would love to hear them!

 

[Malcolm]

Hey @Mpampis!

Very neat project you made here. I like it a lot! Great work!

So from my understanding is that you want to change the text colour of the text to white when the green box is however certain parts of the paragraph text, is that correct?

@Ghost @Hassapiko @Krusty the Senile @swift @LTomy Any ideas?

 

[BorkedSystem32]

It's been along time since I have worked with HTML/CSS, and even then, I haven't done as anything advanced as this, so I will apologise right now if I don't offer the best advice/solution.

Based on the Codepen I looked through(which, was quite wonky for me) and what you appear to be wanting, you want the text in the green box to change to white, and the text outside of that box to be black, correct?

If this is the case, I'll investigate the MDN(Mozilla Developer Network) for you whenever I get the chance.

I'll leave this here for myself, you, and anybody else, who wants to further understand the properties used in your original post:

• https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Again, I can't look into this at the moment, but will whenever I get the chance(or maybe somebody will post an answer here before me).

 

[Mpampis]

Hey guys, thanks a lot for your answers!

Basically I am trying to make the text outside of the box black, but when it is hovering over the box to have the difference color of the backround.
For example when it's over the green box, the difference color is something like purple etc.

Yes I know it's tricky, but I like the thought of making it working

 

[BorkedSystem32]

Hello there again.

After some tinkering about and reading the MDN for examples, I believe this might be what you're looking for:
[CODE lang="css" title="Possible Solution"]p {
mix-blend-mode: difference;
filter: invert(90%);
}[/CODE]

The reason you never got a change in colour was because you did not specify what unit was to be used in the filter property(in this case, it was a percentage sign that you needed). Removing the comments surrounding this section of the code also helped(pro-tip: don't comment out code unless it's due for removal in an update).

Please let me know if this is what you're looking for(or close to it anyway). The colour changes when inside the box, but the outside text isn't black.

 

[Krygore]

Sounds like you need pseudo tags!

[CODE lang="css" title="Example"]p{
color:black;
}
p:hover{
color:white;
}[/CODE]

Pseudo tags tell the element how to react when the cursor is placed over the selection. Commonly used on links to change text color when hovered on and activated.