Skip to content
Submitted about 2 years ago

NFT preview with hover state

Lucas Ferreira•50
@lucasjanta
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

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,340
    @correlucasPosted about 2 years ago

    👾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
    Lucas Ferreira•50
    @lucasjantaPosted about 2 years ago

    @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

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