Design comparison
Solution retrospective
hello guys so my only issue here is i didnt know how to make the hover effect on the image apear and the icon i try to do like : img:hover{ background-image:url('the url");} and i added the background to cyan but it didnt work if someone know how to implement it please tell me.
thank you for the answers
Community feedback
- @correlucasPosted about 2 years ago
👾Hi Moscow, congrats on completing this challenge!
Amazing solution! I’ve just opened the solution’s live site and I liked the job you’ve done a lot. I’ve some suggestions for you:
To improve your box-shadow, you’ve to have in mind two things that make a good shadow,
blur
andlow opacity
for smooth shadows. To improve your current shadow, decrease theopacity
and increase theblur
, try this value instead:box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);
If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/
Think about using relative units as
rem
orem
instead ofpx
to improve your performance by resizing fonts between different screens and devices.Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.✌️ I hope this helps you and happy coding!
Marked as helpful1@MOSCOW2022Posted about 2 years ago@correlucas thank you sir for all the comments you've helped me a lot and i cant thank you enough i learn so much things since i started the challenges and when i get stuck and you comment the solution you really help me to advance so thank you very much
0 - @JoelLHPosted about 2 years ago
Hey good job! I did it this way:
- created a div as child of the img div or sibling called overlay
- add opacity 0 or display none also width 0 can work
- add when hover over img turn opacity to 100 or display block or width 100%; that way when the user hover over the img the overlay will display with the icon in it. Im not sure if this is the best way to do it but it worked fine for me . Hope this helps!
Marked as helpful1
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