Carde responsivo usando CSS Flexbox.

Oi Carlos, muito bom trabalho com esse card hã? Pra setar o ativo, você precisa colocar a cor como background-color no seu css dentro da classe em que estiver a imagem:

Esse é seu código em que a imagem está no html:

<div class="container-img">
            <a href="./">
                 <img class="img" src="images/image-equilibrium.jpg" alt="">
              </a>
  </div>

Sugiro colocar uma classe mais sugestiva que realmente diga o que essa imagem é. Pode não parecer, mas quando um código fica muito grande, a falta de nome sugestivo pode confundir. Eu coloquei uma classe no container e outra na imagem, vou pegar o seu prórpio código pra ficar mais didático. Continuando, você faz assim no css:

.img{
background: #00FFF8;
}

.container-img>.img:hover{
mix-blend-mode: normal;
opacity: 0.5;
}

A classe .background-img coloca um background-color que fica por trás da classe .img (mas veja que você precisa ajustar a a imagem pra cobrir todo o container, senão não funciona). Agora o que faz essa cor de fundo (azul) aparecer ao passar o mouse é a class .container.img>.img:hover, pois faz com que sua imagem fique um pouco transparente (opacity:0,5), e isso faz o background colorido aparecer. Entende?

Eu não vejo utilidade na tag <a> nesse caso. dá pra deixar assim se quiser (com devidos ajustes caso seja necessário, você tem que analisar):

<div class="container-img">
                 <img class="img" src="images/image-equilibrium.jpg" alt="">
  </div>

Tenta isso e me avisa se deu certo... Bora aprender juntos.