Change color depending on background image-CodePudding

So I have this problem, I have a menu with links in it and a picture that follows the curosor and go behind the links. But when the image goes behind the links the links are not visible enough due to their color.

Here is the video of the problem: video

So I wonder if there is something that can do the job, like a backdrop-filter: invert(100%); but just fot the text.

I already looked at some questions and they all say to use mix-blend-mode: difference; but that didn't work for me.

let links = document.getElementsByClassName('navigation-links');

//making the nav appears
document.getElementsByClassName('burger')[0].addEventListener('click', () => {
  document.getElementsByTagName('nav')[0].style.cssText = "transform: scaleX(1);";

  let delay = 0;
  setTimeout(() => {
    for (let i = 0; i < links.length; i  ) {
      links[i].style.cssText = `transition-delay: ${delay}s; transform: skewY(0deg); opacity: 1;`;
      delay  = 0.15;
    }
  }, 1250);
});

document.getElementsByClassName('x')[0].addEventListener('click', () => {
  let delay = 0;
  for (let i = 0; i < links.length; i  ) {
    links[i].style.cssText = `transition-delay: ${delay}s; transform: skewY(10deg); opacity: 0;`;
    delay  = 0.15;
  }

  setTimeout(function() {
    document.getElementsByTagName('nav')[0].style.cssText = "transform: scaleX(0);";
    console.log((0.15 * links.length) * 10, links.length);
  }, (150 * links.length)   150);
});

//creating the picture chang animation
for (let i = 0; i < links.length; i  ) {
  links[i].addEventListener('mouseover', function() {
    let catergoryIndex = this.index;
  });
}

//making the pictures follow the cursor
//https://www.superhi.com/video/smooth-movements-with-javascript

const image = document.getElementsByClassName("link-image-container")[0];

let mouseX = 0;
let mouseY = 0;

let imageX = 0;
let imageY = 0;

let speed = 0.25;


function movePicture() {

  let distX = mouseX - imageX;
  let distY = mouseY - imageY;


  imageX = imageX   (distX * speed);
  imageY = imageY   (distY * speed);

  let centerX = Math.max(Math.min(imageX - (image.offsetWidth / 2), window.innerWidth - image.offsetWidth), 0);
  let centerY = Math.max(Math.min(imageY - (image.offsetHeight / 2), window.innerHeight - image.offsetHeight), 0);

  image.style.left = `${centerX}px`;
  image.style.top = `${centerY}px`;

  requestAnimationFrame(movePicture);
}
movePicture();

document.addEventListener("mousemove", function(event) {
  mouseX = event.pageX;
  mouseY = event.pageY;
});

.burger,
.x {
  position: fixed;
  cursor: pointer;
  z-index: 10;
  top: 1%;
  right: 1%;
  opacity: 0;
  transform: scaleX(1.25);
  -webkit-transform: scaleX(1.25);
  -moz-transform: scaleX(1.25);
  -ms-transform: scaleX(1.25);
  -o-transform: scaleX(1.25);
  animation: fadeIn .25s 2.5s ease forwards;
  -webkit-animation: fadeIn .25s 2.5s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.x {
  position: absolute;
  opacity: 1;
  top: calc(50% - 24px);
  right: 1%;
  transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  animation: none;
  -webkit-animation: none;
}

nav {
  position: fixed;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: flex-start;
  transform-origin: center right;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  background: #fff;
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transition: transform ease-in-out 1.25s;
  -webkit-transition: transform ease-in-out 1.25s;
  -moz-transition: transform ease-in-out 1.25s;
  -ms-transition: transform ease-in-out 1.25s;
  -o-transition: transform ease-in-out 1.25s;
}

.links-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  width: 100%;
}

.navigation-links {
  cursor: pointer;
  text-decoration: none;
  font-family: playfair;
  text-align: center;
  mix-blend-mode: difference;
  z-index: 10;
  font-size: 39px;
  width: 100%;
  padding: 1% 0;
  opacity: 1;
  transition: 1s ease;
  -webkit-transition: 1s ease;
  -moz-transition: 1s ease;
  -ms-transition: 1s ease;
  -o-transition: 1s ease;
  color: #000;
  transform-origin: left;
  transform: skewY(0deg);
  -webkit-transform: skewY(0deg);
  -moz-transform: skewY(0deg);
  -ms-transform: skewY(0deg);
  -o-transform: skewY(0deg);
}

.navigation-links:hover {
  font-family: playfair-italic;
}

.link-image-container {
  position: absolute;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  width: 20vw;
  height: 55vh;
  transition: 0.15s;
  -webkit-transition: 0.15s;
  -moz-transition: 0.15s;
  -ms-transition: 0.15s;
  -o-transition: 0.15s;
}

.link-image-container img {
  pointer-events: none;
  height: 100%;
  width: 100%;
}

.transition-image {
  position: absolute;
  top: 0;
  left: 100%;
}

<nav>
  <img src="./assets/svg/x.svg" alt="x icon" >
  <div >
    <a index="0"  href="">Link</a>
    <a index="1"  href="">Link</a>
    <a index="2"  href="">Link</a>
    <a index="3"  href="">Link</a>
    <a index="4"  href="">Link</a>
    <a index="5"  href="">Link</a>
    <a index="6"  href="">Link</a>
  </div>
  <div >
    <img src="./assets/pictures/nature/photo_1.jpg" alt="link image example" >
    <img src="./assets/pictures/night/photo_1.jpg" alt="link image example" >
  </div>
</nav>

CodePudding user response：

Try adding this to your navigation-links class

.navigation-links{
   background-color: rgba(255, 255, 255, 0.4);
   padding:2px;
}

CodePudding user response：

The correct way was to add the mix-blend-mode: difference; but also to change the navigation-links color to white so same as the background.