Mix blend mode in reversing colors - html

Question

I have got the following code where when black segment overlap black points I want to change black points color to white and also when the rectangle when you hoover one of the points will change the color partially if overlaps the segment. I tried to do this with mix-blend-mode but no luck. What I was trying was to set a mix blend mode: difference to black segment and a isolation to the line. I tried a similar thing with the dosts.
https://jsfiddle.net/xm87keqh/9/
.month-subsection-news {
height: 62vh;
//background-color: blue;
position: relative;
}
.month-name-news {
font-size: 36vh;
position: absolute;
height: 100px;
width: 100px;
top: 5vh;
//margin-top: ;
font-family: GothamMedium;
color: #ededed;
}
.line-timeline {
width: 100%;
position: absolute;
height: 0.1vh;
top: 54%;
z-index: 3;
background-color: black;
// mix-blend-mode: exclusion;
}
.arrow-left-timeline {
position: absolute;
//#at-root: 2vh;
//width: 2vh;
left: 10vh;
top: 47%;
//background-color:blue
}
.arrow-right-timeline {
position: absolute;
//height: 2vh;
// width: 2vh;
right: 10vh;
top: 47%;
//background-color:blue
}
.dots {
position: absolute;
height: 1vh;
width: 1vh;
//left: 20vh;
top: -0.5vh;
background-color: black;
z-index: 999;
border-radius: 100px;
}
.dots1 {
left: 30vw;
}
.dots2 {
left: 50vw;
}
.dots3 {
left: 70vw;
}
.dots4 {
left: 60vw;
}
.dots5 {
left: 55vw;
}
// News cards
.news-card {
font-size: 30px;
width: 500px;
margin: 50px;
}
.top-photo-name {
border-top: 8.7px solid black;
//width: 75%;
}
.title-news-card {
margin: 40px 0px 20px 0px;
font-family: RobotoBold;
// width: 75%;
}
//End of news apge
.left-nav {
height: 100vh;
}
.news-page-api {
min-height: 100vh;
// height: 100vh;
//background-color: ;
}
.second-nav-news {
background-color: white !important;
border: 5px solid black;
top: 68.6px;
}
.column-icons-news {
width: fit-content;
border: 5px solid black;
}
.font-roboto-medium {
font-family: robotoMedium;
}
.number-of-news {
font-size: 311px;
top: 20vh;
font-family: robotoMEdium;
}
.margin-article {
margin-top: 10vh;
}
.news-title-in {
font-size: 59px;
font-family: RobotoBold;
}
.news-article-in {
font-size: 29px;
font-family: RobotoLight;
width: 80%;
}
.z-index {
z-index: 9999;
}
// .date-news{
// width: 75%;
// }
.img-news img {
width: 375px;
}
// .img-news{
// width: 75%;
// }
.news-card {
width: 375px;
}
.news-cards-section {
margin-top: 10vh;
}
// .news-page-section{ overflow-x: scroll;
// }
.dots5 a span {
display: none;
position: absolute;
color: #fff;
background: #000;
padding: 48px;
height: 11vh;
width: 40vh;
left: -30vh;
}
.dots5 a {
position: relative;
}
.hover-me:hover span {
display: block;
text-align: center;
clip-path: polygon(50% 0, 100% 41%, 100% 100%, 0 100%, 0 43%);
}
.black-segment {
height: 7vh;
width: 30vh;
position: absolute;
top: -1.5vh;
left: 80vh;
background-color: black;
}
<div class="month-subsection-news">
<div class="line-timeline">
<div class="black-segment"></div>
<div class="dots dots1"></div>
<div class="dots dots2"></div>
<div class="dots dots3"></div>
<div class="dots dots4"></div>
<div class="dots dots5"> <a class="hover-me" href="#"> a<span >Hello, World!</span></a></div>
</div>
Desired result

Answer 1

mix-blend-mode doesn't works well with black.
Instead you should prefer to use white as the default color, and then apply an invert filter over the whole result.
This also means that you have to manually invert all the defined colors inside the container element.
And the easiest is probably to make your rectangle the mixing element, however, for it to not mix with the horizontal line, you'd need a new wrapper that will define the isolation.
Here is a simplified example:
.line-timeline {
width: 100%;
position: absolute;
height: 5px;
top: 50px;
z-index: 3;
background-color: black;
}
.isolator {
isolation: isolate;
filter: invert(100%);
}
.dot {
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
position: absolute;
top: -2.5px;
}
.dot.in {
left: 50px;
}
.dot.out {
left: 175px;
}
.dots5 a span {
position: absolute;
color: #000;
background: white;
padding: 48px;
height: 50px;
width: 150px;
display: block;
text-align: center;
clip-path: polygon(50% 0, 100% 41%, 100% 100%, 0 100%, 0 43%);
}
.dots5 a {
position: relative;
}
.black-segment {
height: 60px;
width: 150px;
position: absolute;
top: -15px;
background-color: white;
pointer-events: none;
mix-blend-mode: difference;
z-index: 10;
}
<div class="line-timeline">
<div class="isolator">
<!-- we use an isolator to not let our black rectangle mix with the horizontal line -->
<div class="black-segment"></div>
<div class="dot in"></div>
<div class="dot out"></div>
<div class="dots dots5"> <a class="hover-me" href="#"> a<span >Hello, World!</span></a></div>
</div>
</div>