@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!