NFT preview card component with interactive hover elements

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, perhaps some of this may interest you:

  HTML 🧱:

  • 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, we should use a <a> or <button> to wrap the image (depending on what happened when clicking on it). Also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.

  CSS 🎨:

  • Be very careful with changing the font-size of the root element (html) to 10px, I would say that it is not recommended at all, for accessibility reasons.

  • If you want to center the content you should use place-content instead of place-items.

  • Regarding de hover effect:

  I leave you another way to do it in case you want to take a look: You can use the ::before pseudo-element to insert content (background and icon in this case) to an element (the image).

  .img-box {
  position: relative;
  }
  
  .img-box::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;
  }
  
  .img-box: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