html css

Community feedback

• 

  Lucas 👾•104,340

  @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 and low opacity for smooth shadows. To improve your current shadow, decrease the opacity and increase the blur, 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 or em instead of px 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 helpful

  1

  ---

  

  Moscow•420

  @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
• 

  Joel•590

  @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 helpful

  1

  ---

  

  Moscow•420

  @MOSCOW2022Posted about 2 years ago

  @JoelLH
  thank you sir im gonna try it!

  0