NFT Preview Card Component only using HTML and CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hello, Webdevsonu! 👋

  To improve the overlay of the Equilibrium image, I recommend making the overlay with pure CSS.

  But, you need to get the HTML right first.

  • The image should be wrapped by an interactive element. I suggest using an anchor tag. Then, specify the href="images/image-equilibrium.jpg". In this case, you can assume that the purpose of the link is to allow users to view the image.
  • The value for the width and hieght attributes of the img element should be unitless. For your information, those values are used to specify the aspect ration of the image. The browsers use those values to know how much space the image requires before it can be fully loaded. As a result, it will optimize CLS (Cumulative Layout Shift).
  • The alternative text of the image is the label for the anchor tag. So, it can be "Preview Equilibrium".
  • Then, remove the div for the overlay.

  Use pseudo-element and background properties 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 sure to fix all the issues that have been reported.

  I hope this helps. Happy coding!

  Marked as helpful

  0