NFT preview card component using CSS

Community feedback

• 

  Julian Florez•190

  @juliflorezgPosted almost 3 years ago

  Hey Tamara, really good solution for the eye icon on the overlay, I overcomplicated it too much trying to add pseudoclasses (before & after) and trying to show them on hover but couldn't do it, in the end I just put a lame div to contain the icon lol, keep on going !

  Marked as helpful

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, great work on this one. The overall layout looks really nice.

  Yunie08 already gave great tip on this one, just going to add some suggestions as well:

  • For this, using margin alone is not consistent when centering a layout especially when it needs to be centered vertically. You can remove the margin from the .container and on the body tag you could add these stylings instead:

  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  

  • For the nft image. When using img tag, do not forget to add the alt attribute, whether the value is empty or not. Because by not including it, screen-reader will instead read the source path of the image which you don't want. So always include it.
  • You can use the nft name as the nft img alt value since the name is already present so using it would be nice.
  • To be honest, your solution is the first one that I saw using an interactive element for the nft image. Really nice!! Just to make it even better, right now you can only click on the small preview-icon and not on the whole img. For this one, on the .icon selector, first remove these stylings:

  top
  left
  transform
  

  Then add these ones:

  display: grid;
  inset: 0 0 0 0;
  place-content: center;
  

  This way, it will fill up the whole container. But to make it even better, the a tag currently lacks an associated text where it will take the user. You can use aria-label="equilibrium nft" on the a tag so that user will know where this link would take them. Lastly, you can add this:

  .image-equilibrium:focus-within .overlay {
      opacity: .6;
  }
  

  This way, when you tab on the image, the overlay will be shown as well.

  • The svg preview-icon is only a decorative svg so adding an aria-hidden="true" on it would be really nice.
  • For this one, you could use h1 to wrap the nft name a tag since a page needs to have a single h1. But to be honest, the h1 will be better if it was a screen-reader only h1 on the page then h2 would be use on the nft name. Have a look at this simple snippet that I have about screen-reader only h1. Let me know if you have queries about this one.
  • When wrapping up a text-content, make sure that it is inside a meaningful element like p tag or heading tag and not using like div, span to wrap the text.
  • Person's image should be using the person's name as the alt value like alt="Jules Wyvern". Components like this where a person's information is presented, make sure to use their name as the person's img alt value.

  Aside from those, great job again on this one.

  Marked as helpful

  0

  ---

  

  Tamara Carlos•30

  @aramatsolracPosted almost 3 years ago

  Hi, @pikapikamart! Thanks a lot for this great feedback! I just applied it! :D It helped me better understand elements' position, and I realized I forgot to add alt in the images! Thanks again! :)

  1
• 

  Ambre•170

  @Yunie08Posted almost 3 years ago

  Hi Tamara,

  Good job on this one !

  I had the same problem as you with the eye. In my case the solution was to set the background color of the overlay with hsla() instead of hsl(), wich adds an opacity attribute :

  ==> background: hsla(178, 100%, 50%, 0.6);

  And in your :hover pseudoclass you can just set the opacity to 1.

  I did use an img instead of an icon, so I'm not 100% sure this will be the solution for you. Let me know :)

  Marked as helpful

  0

  ---

  

  Tamara Carlos•30

  @aramatsolracPosted almost 3 years ago

  Hi, @Yunie08 thanks for your feedback! I just applied your suggestions, and it worked! :D oh, I kept it as an icon.

  1