Design comparison
SolutionDesign
Solution retrospective
What specific areas of your project would you like help with?
Dicas são Bem Vindas !
Community feedback
- @danielmrz-devPosted 8 months ago
Fala @ThiagoTelheiro!
Teu projeto ficou show!
Colocar esse icon view é realmente um desafio. Eu fiz dessa maneira aqui abaixo e deu certo, caso você ainda esteja procurando uma solução:
HTML
<img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic"> <div class="icon"> <img src="images/icon-view.svg" alt="icon-view" class="icon-view"> </div>
CSS
.pic { width: 300px; background: url('images/icon-view.svg') center center no-repeat; background-color: $Cyan-hover; background-size: cover; margin: auto; border-radius: 10px; } .icon { display: grid; justify-content: center; align-items: center; position: absolute; opacity: 0; background-color: $Cyan-hover; width: 300px; height: 300px; border-radius: 10px; } icon:hover { opacity: .5; cursor: pointer; }
Só não esquece de mudar os nomes das classes pra corresponder ao seu projeto.
Espero que ajude!
Fora isso, seu projeto ficou excelente!
0@ThiagoTelheiroPosted 8 months ago@danielmrz-dev Obrigado pelas dicas, estou aprendo mais sobre, vai ajudar bastante.
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