HTML5 and CSS3

Community feedback

• 

  Dominik•130

  @Dmnk28Posted over 2 years ago

  Hi Udeh,

  Nice work! I like that you tweaked your picture and name in the card footer. For perfectionists the footer text has to be centred vertically though ;-)

  That's not an intuitive one: The principle is to lay two (or more) elements on top of each other and only displaying the top level one ("overlay") when the area is hovered. A more detailed explanation you could find here and modify their code to your needs: https://www.w3schools.com/howto/howto_css_image_overlay_title.asp . In our case we could use three "layers" (for the actual image, the overlay and the overlay icon).

  And as the report says, I would recommend to use the lang-attribute on the html-tag. It's better for accessibility and therefore for SEO, too.

  Marked as helpful

  0

  ---

  

  Udeh Ifeanyi•520

  @IfescohubPosted over 2 years ago

  @Dmnk28 thanks for the commendation. I appreciate your explanation. Very helpful

  1
• 

  Serhii•20

  @serhii-maliutinPosted over 2 years ago

  Nice work, your design looks very close to original. I suggest you use flexbox on your <div class="description-3"> to align it in center vertically. And for fixing issue with accessibility just change your <h3>Equilibrium #3429</h3> to <h1> element. Happy Coding! There is a good video how to create image overaly on hover: https://youtu.be/exb2ab72Xhs

  Marked as helpful

  0

  ---

  

  Udeh Ifeanyi•520

  @IfescohubPosted over 2 years ago

  @serhii-maliutin Thank you so much. I will do that.

  0