@Efeh2
Submitted
@samimkabiru
@Efeh2
Submitted
@samimkabiru
Posted
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!
@ahmedrdawan
Submitted
@samimkabiru
Posted
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.
@giselida
Submitted
@samimkabiru
Posted
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