Design comparison
Solution retrospective
My biggest challenge with this one was the hovering img change. I was able to get the ::hover pseudo element to work with all of the elements except the img. I tried a few methods like background-img and using ::before and ::after psuedos but for some reason the img would not show when hovering. The curser shows, so I know the hover element works, but the img did not.
I'd appreciate any advice on this one!
Used straight HTML and CSS. No SASS, no frameworks, and no original design files used.
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
COMPONENT MEASUREMENTS 📐:
- Use
min-height: 100svh
forbody
instead ofheight: 100svh
. Setting theheight: 100svh
may result in the component being cut off on smaller screens.
- For example; if we set
height: 100svh
then thebody
will have100vh
height no matter what. Even if the content spans more than100svh
.
- But if we set
min-height: 100svh
then thebody
will start at100svh
, if the content pushes thebody
beyond100svh
it will continue growing. However if you have content that takes less than100svh
it will still take100svh
in space.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0 - @jeremyoduromanuPosted over 1 year ago
Okay. In order to make the view icon appear when you hover on the image, you can place the container of the view icon on the image container using position absolute and set the same width and height of the image container to the view icon container.
Next, you can make the view icon appear on top of the image using z-index, and then set the opacity of the view container to 0 (with that the view icon and the container become transparent which makes it looks like the image is on top) and you set a hover effect on the view container with opacity 1.
Marked as helpful0
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