NFT Preview Card Component using HTML and CSS

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, perhaps some of this may interest you:

  HTML / ACCESSIBILITY:

  • The main content of every page (the card in this case) should be wrapped with the <main> tag.

  • The Equilibrium image is a meaningful image and in case the user can't see it, the alt text should give a description.

  • Whenever 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, we should also use a <a> or <button> to wrap the image (depending on what happened when clicking on it).

  • The link of the heading should be inside of it, to make it work only when hovering over the text and not full width. Like this: <h1><a href="#">Equilibrium #3429</a></h1>

  CSS:

  • It is better to use min-height: 100vh; for the container, as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).

  • Regarding your comment, I think you could remove the '.content' div since it does not serve any function. And then center the icon on the 'overlay'.

  But in case you want to take a look, I leave you another way to do it:

  You can use the ::before pseudo-element to insert content (background and icon in this case) to an element (the image).

  Using position and width/height to cover the image and grid to center the icon. Then opacity to hide/show.

  And we have a cleaner html with just the image (no need for overlay).

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

  Please let me know if you want more info on any of these topics or disagree with something.

  I hope it’s useful : )

  Regards,

  Marked as helpful

  0

  ---

  

  Amanuel Haile•120

  @amangoferPosted over 1 year ago

  Hi 👋 @fernandolapaz thank you for the review, i didn't see any difference with the min-height: 100vh; change for now, i'll try to see if there is any with other devices, i liked the ::before pseudo-element suggestion of yours, i'll try to use it with other challenges. and really thank you for your time!

  1