Making a fade in when in sight thing but it messed up my :hover effect for a card thing

I have 8 divs in a div called card-group these cards should expand and there are also little cards which go to the edge this worked then a added more text at the bottom and the on screen fade in but it messed up the :hover effect.
Here is one of the :hover statements there are 8 of these:
style.css

.card-group:hover  .big-card:nth-child(1) {
  transform: translate(-75%,16%) rotate(-24deg);
  cursor: pointer;
}

then theres also the seen part in style.css

.hidden {
  opacity: 0;
  transition: all 1s;
  filter: blur(5px);
  transform: translateX(-100%);
}
.visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateX(0);
}

Here is the code from app.js with a defer propertie

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) =>{
    if (entry.isIntersecting) {
      entry.target.classList.add('visible'); // Use a different class for visibility
    } else {
      entry.target.classList.remove('visible');
    }
  });
});

const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((element) => observer.observe(element));

const cards = document.querySelectorAll('.card');

cards.forEach(card => {
  card.addEventListener('mouseenter', () => {
    card.classList.add('hovered');
  });

  card.addEventListener('mouseleave', () => {
    card.classList.remove('hovered');
  });
});

I was expecting this card group to open like the 8 :hover things said it should but instead it just did nothing the effect where the hidden and visible things fade in works but the hover does not. Thanks in advance if there was a way I could have written this better please let me know.