Design comparison
SolutionDesign
Solution retrospective
I wasn't able to do the preview part of the NFT image, if anyone could leave feedback on how I could do it it would be of great help, and other feedback in general would also be great.
Community feedback
- @danielmrz-devPosted 12 months ago
Fala Rian! Tudo certo?
Esse efeito do hover é bem chatinho de fazer mesmo.
Eu fiz assim:
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; }
Não esquece de mudar os nomes das classes pra corresponder ao seu projeto! 🙋🏽♂️
Espero que te ajude!
Marked as helpful0@rianmatiasPosted 12 months ago@danielmrz-dev quando eu fiz o desafio eu coloquei imagem no lugar de background-image, por isso não estava conseguindo fazer, mas agora eu já aprendi, muito obrigado pelo feedback
1
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