Design comparison
Solution retrospective
The overlay on the image on hover was a bit tricky. I couldn't get it to fully match the provided preview. Otherwise I had a lot of fun working on this.
Community feedback
- @dostonnabotovPosted over 2 years ago
Hi, there. You can add an eye icon and background-color, using pseudo-elements. For example, in
.card::before
, you addbackground-color
, and in.card::after
, you add your icon asbackground-image
. You have to make sure that both are set theiropacity
to 0. When hovered, in.card:hover::before
and.card:hover::after
, you addopacity
to make it visible. You can view my solution as well if you want where I used this strategy.Marked as helpful0 - @AditNovadiantoPosted over 2 years ago
Wow... good job @@Sam-Kikoma you did this project so good and perfectly and didn't have any issues there!!!
keep it up and happy coding ☕
0
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