Design comparison
Solution retrospective
HELP!!
how to add border-radius
and hover
to main image
Community feedback
- @PipouwPieuwPosted over 1 year ago
Hello, well done completing this challenge!
The
border-radius
you set doesn't show because you gave apadding
to your image. Remove this padding and instead apply it to the element that contains the image, here.card
.To create a hover effect you could wrap the eye image inside a
<div>
, give this div a coloured background, center the eye icon inside using flexbox and use absolute positioning to put the div over the image. Then you give it anopacity
of 0 which you switch back to 1 when the element is hovered, usingdiv:hover
. This should work :)Hope this help. Dont hesitate if you have further questions. Keep going!
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