NFT preview card component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Godwin! 👋

  Congratulations on completing this challenge! 🎉

  To create the overlay, there's no need for transform property. Also, there's no need for transform: translate(0, 0);. I don't see any difference when I toggle the property (with dev tool).

  We need to get the HTML right first before starting to fix the overlay.

  • The Equilibrium image needs to be wrapped by an interactive element. It has interactivity so it should be wrapped in an interactive element such as an anchor tag.
  • The value for the href attribute is the file path to the Equilibrium image.
  • The alternative text for the image will be "Preview Equilibrium".
  • After that, remove the SVG from the HTML. We will create the overlay with pure CSS. So, there's no need for the eye icon to exist on the HTML.

  Now, to create the overlay.

  • First, create a pseudo-element from the anchor tag.
  • Make the pseudo-element fill the entire image.
  • Lastly, on hover (a:hover::before), add the cyan background color and the eye icon.
  • For the cyan background color, use hsla (or rgba) color format.

  One more suggestion is to make the anchor tag a child element of the h1. h1 as a child element of the anchor tag is potentially invalid markup

  I hope this helps!

  Marked as helpful

  1

  ---

  

  P

  Godwin•410

  @itadori-kunPosted about 2 years ago

  @vanzasetia Thank you will try redoing it according to the guidelines you specified.

  1