Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT preview with hover state

@lucasjanta

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm very proud because I had some problems with the hover effect on the main image, but I manage to figure it out. I would like to know if there's a way to improve the hover effect using less code.

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Oi @lucasjanta, tudo bem? Parabéns pelo desafio!

Muito boa a solucao irmao eu sei o quanto é dificil aplicar esse efeito, aqui algumas dicas irmao

Você precisa incluir o título para sua PÁGINA. Faça isso inserindo no <head> a tag <title><title>NFT Card - Front End Mentor</title>

Adicione o favicon <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

Quando vc adiciona alguns efeitos de hover, geralmente eles ficam travados até vc clicar em outra coisa no mobile, um jeito de evitar isso é usando uma media query especial para evitar hover effect em dispositivos touch, veja o código abaixo:

@media (hover: hover) {
{COLOQUE AQUI TODO CODIGO CSS COM EFEITOS DE HOVER}
}

👋 Espero que essas dicas te ajudem e que você continue no foco!

Marked as helpful

1

@lucasjanta

Posted

@correlucas Nossa, esqueci totalmente de colocar o título na página, valeu por lembrar Vou adicionar o ícone e o título e obrigado pela dica do hover, testei aqui no celular e realmente fica meio travado, interessante a solução de colocar na media query. Muito obrigado pelo feedback :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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