NFT-preview-card-component-challenge

Community feedback

• 

  P

  cjdemille•500

  @cjdemillePosted over 2 years ago

  Hover problem—you can create a div with the eye icon that's has a background color of light blue. I like to wrap the image and the overlay color in a div so it's easier to size the overlay on the image and set the overlay to absolute. Then you can use a pseudoclass so that the opacity is 0 until you hover.

  For the line at the bottom, you can wrap the cost and time components in a div and set the border-bottom property.

  The other thing to watch out for is that you didn't include alt-text on the images. Ideally, you should be able to use a couple of words of descriptive text. If the image is purely decorative, you can set the alt-text to null by setting it to "" with no space between the quotation marks.

  0
• 

  Nguyen Le Vinh•530

  @VinhNguyenLePosted over 2 years ago

  • Hover problem: you can put a pseudoclass for the tag containing that image, that tag has content as the path to the image view.svg in the images folder, and you give that pseudoclass a background of lightblue, opacity: 0. when you hover on it then opacity: 1
  • Line problem: you can put a div tag containing the entire section above the line, then you add the padding attribute to all sides of that tag, then you create the line with border bottom, the padding outside will not be affected by the border. Remember to reset the css and set box-sizing: border-box
  • You can check my solution

  0