Submitted 9 months ago

HTML/CSS NFT preview card component

Iago Marques Viera•100

@Iago-Marques

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Fiquei feliz em conseguir chegar no final do objetivo, muito gratificante aprender coisas novas e colocar em pratica.

What challenges did you encounter, and how did you overcome them?

Foi um desafio para mim foi colocar o icone view, não conseguir colocar, mas vou estudar sobre o assunto e trazer a resolução do problema!

Community feedback

Daniel 🛸•44,310

@danielmrz-devPosted 9 months ago

Fala @Iago-Marques!

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!

Please log in to post a comment

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