Css3, HTML5, flexbox, pseudo-class and pseudo-elements

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, IlnaraAckermann! 👋

  Great job on creating the overlay for the Equilibrium image! 👏

  You have wrapped the image with an interactive element and used pseudo-elements to create the overlay. It is rare to see a good solution for the overlay.

  I recommend adding an overflow: hidden to the .image-link. Then, move the border-radius: 0.5rem from the .image to the .image-link. This way, the overlay will have rounded corners.

  Also, In your CSS, I notice this selector .nft-card .image-link .image while that only needs to be .image. Don't nest selectors unnecessarily. Remember to keep the CSS specificity as low and flat as possible.

  Then, make the <a> a child element of the <h1>. <h1> should not be a child element of <a> element. It results invalid HTML. Caninclude

  I hope this helps. Happy coding! 😄

  Marked as helpful

  2

  ---

  

  IlnaraAckermann•70

  @IlnaraAckermannPosted over 1 year ago

  @vanzasetia I really apreciate u tips i will refactor my code. thanks

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @IlnaraAckermann

  You are welcome!

  1