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