NFT Component Card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello, Edmond! 👋

  Before I tell you how to create the overlay, we need to get the HTML right first.

  • Don't use the picture element to wrap the Equilibrium image and the eye icon. It's not what picture element suppose to be used. I recommend reading the MDN documentation for the picture element to know when to use it.
  • Remove the eye icon image from the HTML. We will create the overlay with pure CSS.
  • Wrap the Equilibrium image with an anchor tag. It has interactivity so it should be wrapped by an interactive element. (the same goes for the h1 and the author)
  • The alternative text for the image should tell that it is also a link (like a call-to-action). So, since the hover effect will show an eye icon, we can assume that it will allow the user to preview the Equilibrium. So, the alternative text can be "Preview Equilibrium".
  • You may notice that I remove the word "Image of". That's because there is no need for it. The semantic meaning of the img element is already enough.

  Now, to create the overlay we use pseudo-element and background properties.

  • 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 to control the opacity.

  I hope this helps! Happy coding! 😄

  0