Samim Kabiru
@samimkabiruAll comments
- @Efeh2Submitted 9 months ago@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 tocover
. 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, setwidth
to100%
andheight
to100%
. then set theposition
property toabsolute
. After that, setposition
torelative
on the container of the image. To place the view image in the center, setdisplay
on the overlay toflex
and then setjustify-content
andalign-items
to center. To make the view image initially invisible, setmax-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 abackground-color
of the specified color and the view image should have amax-height
of100%
. 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 - @ahmedrdawanSubmitted 9 months ago@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 thebox-shadow
property would solve this problem. I hope this helps.0 - @giselidaSubmitted 9 months ago@samimkabiruPosted 9 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 tocover
. With this, the image will be set back to it's normal size but some parts of the image will be cropped out if aheight
property was explicitly set. I hope this helpsMarked as helpful0