NFT preview card component with Grid and Flexbox

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋🏻, regarding your comment:

  • Here I leave another way in case you want to take a look: the ::before pseudo-element can be used to add the color and icon to the image. Using position, width and height to cover the image and grid to center the icon. Then opacity to hide/show.

  Note: The image is not decorative and therefore it shouldn't be a background-image (it needs an alt attribute with at least a short description).

  .nft-image {
  position: relative;
  }
  .nft-image::before {
  content: url(images/icon-view.svg);    
  background-color: hsla(178, 100%, 50%, 0.5);
  position: absolute;    
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  opacity: 0;
  }
  .nft-image:hover::before {
  opacity: 1;
  }
  

  This may also interest you:

  • When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, the image should be wrapped with <a> or <button> (depending on what happened when clicking on it), and also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.

  I hope it’s useful : )

  Regards,

  Marked as helpful

  1

  ---

  

  ryangholland•170

  @ryanghollandPosted over 1 year ago

  @fernandolapaz Very helpful. Thanks!

  I think when I'm doing these projects, I focus too much on just getting things to look right. I ignore best practices and how things should be done in the real world. I'll be sure to work on that in the future.

  1

  

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  @ryangholland

  Yes, don't worry, I think that happens to most of us : )

  0