Solution with CSS Variables, Flexbox and Grid

Community feedback

• 

  Hmj•50

  @HernanMorelPosted almost 3 years ago

  Hey, thanks for your analysis on my submission, I appreciate the feedback.

  I think you did a great job, this is such a cool design that calls for a decent amount of attention to the small details (something I'm getting better at myself)

  The overlay container on the "eye" icon is faded upon hover, I believe because you didn't separate the elements on the markup. I ended up adding a rgba color on the container overlay, which leaves the eye icon at pure white upon hovering. It took me forever to figure it out.

  Also, on the main headline "Equilibrium" notice that the text highlighted when the entire block is hovered. I ended up putting the text on a span, which removes the block properties of a p tag or h tag. Then, giving that span a display of inline block which allows for a cleaner UI upon hover, since the text is highlighted when the mouse hovers not the end of the block.

  Let's keep at it!

  Marked as helpful

  0

  ---

  

  bikeinman•1,080

  @BikeInManPosted almost 3 years ago

  @HernanMorel I appreciate your feedback.

  I was totally unaware of the hovering area problem, until you pointed out. I did not use span, but I fixed it by adding inline-size: fit-content; to h1 selector.

  About the overlay problem, thank you for pointing out that I needed a alpha channel too. I added that. And also I had a bug on hover(opacity was set to 0.6). I changed to 1.0 and now it works similar to the design.

  Thank you.

  Have a nice day! @bikeinman

  0