[Dúvida] Efeito opacity em um elemento sem afetar outro | HTML e CSS

Olá, Josefino! Como vai?

Parabéns pelo projeto, está ficando muito bom!

Para obter o resultado que você deseja, você pode adicionar um pouco de JavaScript ao seu código.

Por conta de eu não ter o seu código completo aqui, criei um código que imagino ter uma estrutura parecida com a do o seu código e obtive o seguinte resultado:

GIF de uma página com uma série de capas de um filme onde, ao passar o mouse por cima de uma dessas capas, as demais ficam com um efeito que as escurece.

Caso esse seja o resultado desejado, aqui está o que foi feito pensando em um código HTML simples, com uma série de <div class="card"> dentro de uma <div class="card-deck"> sendo que em cada <div class="card"> existe um imagem (sem classe definida):

CSS:

body {
  background-color: black;
}

.card-deck {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  transition: 0.5s;
}

img{
  border-radius: 5px;
  max-width: 200px;
}

JavaScript:

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

cards.forEach(card => {
  card.addEventListener('mouseenter', () => {
    cards.forEach(c => c.style.opacity = '0.3'); // Define a opacidade de todos os cards para 0.3
    card.style.opacity = '1'; // Define a opacidade do card atual (hover) para 1
  });

  card.addEventListener('mouseleave', () => {
    cards.forEach(c => c.style.opacity = '1'); // Quando o mouse sai de um card, redefine a opacidade de todos os cards para 1
  });
});

Espero que isso ajude. Fico à disposição!

Abraço!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!