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.