Design comparison
Solution retrospective
Can someone explain why the hover state on the image is just a tiny bit larger than the image?
Community feedback
- @Rohan-HazariPosted almost 3 years ago
Hey there I also faced the same problem
I found this "It happens because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements"
So I just gave the image(not the div in which the image is) display:block and the space below disappeared and now the hover state became the same size as that of the image hope it helps
Link to where I found the answer - https://www.tutorialrepublic.com/faq/how-to-remove-white-space-under-an-image-using-css.php#:~:text=It%20happens%20because%20image%20is,to%20adjust%20other%20inline%20elements.
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