nft-preview-card-component

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 3 years ago

  Hi there! 👋

  I notice an issue where as a user I can see the hover effect on the Equilibrium image without actually having my cursor above the image. Then, I found that the scale property causing this issue.

  .card-overlay-icon {
      /* scale: 15%; */
      width: 100%;
  }
  

  To fix and improve the overlay of the Equilibrium, we need to get the HTML right first.

  • First, remove the card-overlay div and the card-overlay-icon. We will make the overlay using pseudo-elements and background properties.
  • Second, the card-image should be a link element that wraps the Equilibrium image.
  • Lastly, the alternative text for the image should be the text content for the link. When I was doing the challenge, I set the value for the href to the image. The purpose of the link was to allow the users to preview the image. So, the alternative text is "Preview Equilibrium".

  Then for the styling,

  • Create one pseudo-element from the anchor tag.
  • Then make the pseudo-element fill the entire image.
  • After that, when the anchor tag gets hovered (a:hover::before), you can add the cyan overlay and the eye icon using background properties.
  • Lastly, for the cyan color, I recommend using the hsla color format. This way, you can reduce the alpha (opacity) of the cyan color.

  That's it! I hope this information is useful! 🙂

  11

  Marked as helpful