Design comparison
Community feedback
- @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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord