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

@lucas-merino-dev

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 really got stuck on the image hover effect.

Can someone help me to scale down the view icon and add cyan background, please?

Community feedback

P. Ricardo 2,370

@pRicard0

Posted

  • Você pode usar a tag <hr> ao invés da div com a classe line, significa horizontal rule. É uma tag especifica para criar essas linhas. Ao invés de adicionar border: 1px ( a borda vai somar 1px do top e 1px do bottom e vai parecer ficar mais grossa ) adicione para um lado só usando border-top ou border-bottom.
  • Você não pode usar o atributo alt das imagens quando a imagem é meramente ilustrativa. É recomendado que adicione o atributo aria-hidden="true" para impedir que essas imagens possam ser lidas por leitores de telas.

Marked as helpful

1

@lucas-merino-dev

Posted

Pode crer!

Essa div eu criei no improviso pra testar e acabei gostando do resultado kkk mas vou arrumar em nome da semântica.

Valeu Ricardo!

0
Sahil Gill 290

@SahilGill003

Posted

You have used content property for displaying the view icon thats why you cannot change the dimension of image instead use pseudo element (after or before) with position absolute or you can use another div inside nft div. I am using pseudo element for this one feel free to try the other one on your own.

// when hovering over image css will be applied to after pseudoelement
.image:hover::after {
  background: aqua;
  content: "";
  position: absolute; 
  width: 100%;
  height: 100%;
  left: 0;
  background-image: url('./images/icon-view.svg');
  background-size: 100px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0%,100%,100%,0.5);
  cursor: pointer;
}

Marked as helpful

1

@lucas-merino-dev

Posted

Oooh, now I see!

Thank you very much!

I’m not very used to pseudoelements, imma check it out.

1

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