NFT preview card component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Diego, well done completing your second challenge here! It's wonderful to see the high level of attention to detail, which might be due to your background in UI.

  I think you really did many things well here, such as how you centered the component and how you created the overlay. The only suggestion I have is to have the img for the cube as an actual HTML element instead of as a background image. This would be better for accessibility, since this image is considered a major part of the content. For things like icons where they're only decoration and it's not really necessary for them to be there, a background image would be fine, even though I would still prefer to use img but with aria-hidden="true" added so that screen readers could skip them.

  Great job, and looking forward to more solutions!

  Marked as helpful

  2

  ---

  

  Diego•80

  @diegopereira0Posted over 2 years ago

  @elaineleung

  Hi, Elaine! How are you?

  Thank you so much for the tips! On start i put the img instead background, but i couldn't made the hover effect with the background color layer and the eye icon, so decided use a background with ::after on hover, wich were a solution that i knew. But i'll consider your recomendation on the next times. Thanks again!

  Hugs from Brazil!

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @diegopereira0 You're welcome, Diego! Here's what I did for the overlay in my solution, see whether it can help you:

  HTML here:

  <div class="product-img">
     <img src="./images/image-equilibrium.jpg" alt="Equilibrium, a multicolor cube" />
     <div class="overlay" aria-hidden="true">
        <img src="./images/icon-view.svg" alt="">
     </div>
  </div>
  

  CSS:

  .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: hsla(178deg, 100%, 50%, 0.5);
    opacity: 0;
    display: grid;
    place-content: center;
    transition: opacity 200ms ease-in-out;
  }
  .overlay img {
    width: 3rem;
    height: 2rem;
  }
  .overlay:hover {
    opacity: 1;
  }
  

  Hugs from Canada! 😊

  Marked as helpful

  1
• 

  Adriano•38,390

  @AdrianoEscarabotePosted over 2 years ago

  Ola Diego, tudo bem?

  É bom ver brasileiros por aqui, ainda mais quando ele tem o mesmo sobrenome que o meu ahuahuahua

  Cara o seu código está ótimo, bem limpo e pequeno, está tudo funcionando conforme o esperado. Se você quer tornar um dev front-end tenho certeza que está indo pelo caminho certo, continua fazendo os desafios aqui porque quero ter o privilégio de constatar as obras insanas que irão sair auhauhuahauh

  Parabéns.

  1

  ---

  

  Diego•80

  @diegopereira0Posted over 2 years ago

  @AdrianoEscarabote

  Fala, Adriano! Será que somos primos de 5o grau? 🤣🤣 Pelo que eu percebi, até que a presença brasileira aqui é forte, viu.

  Muito obrigado, brother! A meta é ser um "ui front-end designer" kkkkkk, vamos ver se eu consigo chegar lá.

  Abração!

  1