Nft-preview-card-components

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Faith Kalu Onyeani! 👋

  For the hover effect, you can create it with CSS using a pseudo-element and background properties. But, you need to wrap the <img> with an anchor tag first. After that, create the hover effect with a pseudo-element from the <a> tag.

  Note: make sure that the heading is not having the same parent element as the image.

  Here are a few ways you can do to improve this solution.

  • Remove empty <header></header>.
  • Replace the <h3> with <h1>. Heading should always be in a logical order.
  • Wrap the "Jules Wyvern" with an <a> tag. It has interactivity.
  • Use rem unit for margin. Using percentage units for margin will make a lot of whitespace on wide screen sizes.
  • Remove the media query. The styling of the card is the same on all screen sizes. You only need to make sure that the card can shrink on tiny screen sizes.

  I hope my feedback helps. 🙂

  Marked as helpful

  1