Design comparison
Solution retrospective
O meu maior desafio foi encontrar uma solução para a imagem ativa, após bastante pesquisa consegui uma solução utilizando o background-image, procurei utilizar apenas CSS puro com Flexbox.
Community feedback
- @engsofjvolfePosted almost 2 years ago
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.
Marked as helpful0@carlosg-silvaPosted almost 2 years ago@engsofjvolfe Olá, muito obrigado pelas dicas, após algumas tentativas e pesquisa consegui encontrar uma solução utilizando o background com imagem e color juntos dentro do hover.
.view-icon { width: 280px; height: 280px; top: 20px; left: 20px; border-radius: 10px; position: absolute; }
.view-icon:hover { background: url(images/icon-view.svg) no-repeat, hsla(178, 100%, 50%, 0.322); background-position: 50% 50%; cursor: pointer; }
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord