All comments

• 

  Efeh2•90

  @Efeh2Submitted 9 months ago

  

  NFT

  1

  50
  

  Samim Kabiru•280

  @samimkabiruPosted 9 months ago

  Hello @Efeh2,

  your solution looks great! But there are a couple of issues in your solution. The first issue is the image. Compared to the reference material, the image looks squashed. A solution to this would be to set the object-fit property to cover. this makes the image to revert to the normal look but some parts of the image will get cropped out if a height property was explicitly set on the container of the image.

  The second problem is the hover state of the image. The image does not have a hover state. a solution to that is to set an overlay on the image. first you set an empty <div> in the container of the image and then add the view image inside the <div>. give the <div> a class like 'overlay' and then go to your stylesheet. In order for it to have the same width and height as the container of the image, set width to 100% and height to 100%. then set the position property to absolute. After that, set position to relative on the container of the image. To place the view image in the center, set display on the overlay to flex and then set justify-content and align-items to center. To make the view image initially invisible, set max-height to 0. then using the :hover pseudo class selector, write a line of code to say that when the container of the image is hovered on, the overlay should have a background-color of the specified color and the view image should have a max-height of 100%. By the way, the 'view image' I am referring to is the image of an eye that was provided in the resources folder. I hope this helps!

  1
• 

  ahmedrdawan•330

  @ahmedrdawanSubmitted 10 months ago

  

  Ussing Css Flex

  1

  30
  

  Samim Kabiru•280

  @samimkabiruPosted 9 months ago

  Hi @ahmedrdawan your solution looks great, but there's is just one issue, the box-shadow property that you set is giving the preview component a shadow. Deleting the box-shadow property would solve this problem. I hope this helps.

  0
• 

  Giselida Melo•40

  @giselidaSubmitted 10 months ago

  

  scss, position

  1

  30
  

  Samim Kabiru•280

  @samimkabiruPosted 10 months ago

  Hello @giselida, your solution looks great but let me give an extra tip that might help. The image in your NFT preview component looks kind of squashed compared to the reference material. A solution to this would be to set the object-fit property to cover. With this, the image will be set back to it's normal size but some parts of the image will be cropped out if a height property was explicitly set. I hope this helps

  Marked as helpful

  0